如何在React中選擇隨機組件

我正在嘗試創建一個動態網站，在每次重繪 時隨機加載一個標題組件。無論我采用哪種方法，它在初始加載時都能正常作業，然后每次重繪 后都會拋出此錯誤：

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

我正在用頭撞墻。谷歌搜索已經兩天了，我覺得我已經嘗試了一切。任何幫助，將不勝感激。

uj5u.com熱心網友回復：

我注意到您已經嘗試編輯 babelrc 檔案，但是您可以嘗試添加此檔案嗎？

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

babel-plugin-styled-components如果您沒有安裝，則安裝。

檢查該指南，您的問題有 7 種不同的答案，希望其中之一可以解決問題。

標籤：javascript 反应 下一个.js 样式组件 顺风-css

上一篇：獲取和XHR請求適用于Android但不適用于iOS

下一篇：避免在渲染函式中定義行內函式