如何 select React 中的随机组件

Question

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

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"

这是我的 parent 组件：

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

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

我正在用头撞墙。 google 搜索已经两天了，我觉得我已经尝试了所有方法。任何帮助将不胜感激。

Answer 1

我注意到您已经尝试过编辑 babelrc 文件，但是您可以尝试添加这个吗

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

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

检查 guide 不过，您的问题有大约 7 个不同的答案，希望其中之一能解决问题。

如何 select React 中的随机组件

How to select a random component in React

javascript

reactjs

styled-components

next.js

tailwind-css