如何在 React 中选择随机组件

Question

我正在尝试创建一个动态网站，该网站在每次刷新时随机加载标题组件。无论我采用哪种方法，它在初始加载时都可以正常工作，然后每次刷新后都会抛出此错误：

Warning: Prop `className` did not match. Server: "leading-none mb-0 pb-0 text-6xl lg:text-7xl text-pink-light" Client: "leading-none mb-0 pb-0 text-6xl lg:text-7xl text-pink"

这是我的父组件：

import React, { useState } from 'react'
import PageHeader_VarH_Peach from './PageHeader_VarH_Peach'
import PageHeader_VarH_Pink from './PageHeader_VarH_Pink'
import PageHeader_VarH_Pink_Light from './PageHeader_VarH_Pink_Light'
import PageHeader_VarH_Blue from './PageHeader_VarH_Blue'

import PropTypes from 'prop-types'

PageHeader_VarH.propTypes = {
  header: PropTypes.string,
  subheader: PropTypes.string,
  playFrames: PropTypes.array,
}
const patterns = [
  PageHeader_VarH_Peach,
  PageHeader_VarH_Pink,
  PageHeader_VarH_Pink_Light,
  PageHeader_VarH_Blue,
]

function PageHeader_VarH({ header, subheader }) {
  const [randomNumber] = useState(Math.floor(Math.random() * patterns.length))

  const ThisPattern = patterns[randomNumber]

  return (
    <div>
      <ThisPattern header={header} subheader={subheader} />
    </div>
  )
}
export default PageHeader_VarH

我知道 useState 可能不是答案，但它目前是我在调试过程中所处的位置。这是 PageHeader 组件之一的示例。图案完全随机加载（它们是 Lottie 元素）。我现在正在尝试使用 ClassNames 包，看看它是否有效（它不起作用）

import React from 'react'
import Lottie from 'react-lottie-player'
import classNames from 'classnames'
import Pattern from '../../data/Patterns_Peach.json'
import PropTypes from 'prop-types'

PageHeader_VariableHeight.propTypes = {
  header: PropTypes.string,
  subheader: PropTypes.string,
  pattern1: PropTypes.object,
}

// Local Variables

const primaryColor1 = 'peach'
const accentColor1 = 'egg'
const subheaderColor1 = 'egg '

const pattern1 = Pattern
const playFrames = [
  [0, 23],
  [24, 95],
]

function PageHeader_VariableHeight({ header, subheader }) {
  function Pattern({ pattern1 }) {
    return (
      <Lottie
        animationData={pattern1}
        loop
        segments={playFrames}
        play
        rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
        style={{ height: '100%' }}
      />
    )
  }

  return (
    <section
      className={classNames('relative overflow-hidden lander-variableHeight my-4', [
        `bg-${accentColor1}`,
      ])}
      id='topOfPage'
    >
      <div className=' z-0 absolute  top-0 left-0 w-full h-full overflow-hidden lottie' id='lottie'>
        <Pattern pattern1={pattern1} />
      </div>
      <div className='relative py-16 my-20 h-full flex flex-col justify-center bg-transparent '>
        <div
          className={classNames(
            'my-20 max-w-xs  sm:max-w-md md:max-w-lg lg:max-w-3xl py-12 flex justify-center ',
            [`bg-${primaryColor1}`],
          )}
        >
          <div className='w-fit px-6'>
            <h1
              className={classNames('leading-none mb-0 pb-0 text-6xl lg:text-7xl', [
                `text-${accentColor1}`,
              ])}
            >
              {header}
            </h1>
            <div className={classNames('my-2 text-2xl font-bold', [`text-${subheaderColor1}`])}>
              {subheader}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
export default PageHeader_VariableHeight

这是一个大项目，但如果有人想筛选，这里有一个完整的 repo 链接：pb-oct-22

我正用头撞墙。谷歌搜索已经两天了，我觉得我已经尝试了一切。任何帮助将不胜感激。

Answer 1

我注意到您已经尝试编辑 babelrc 文件，但您可以尝试添加此文件

"plugins": [ [ "babel-plugin-styled-components" ] ]

如果你没有安装 babel-plugin-styled-components。

检查guide tho，您的问题有 7 个不同的答案，希望其中一个可以解决。