在 REACT 中迭代样式化组件会产生警告“为组件生成了超过 200 个类”

Question

我是 React 新手，正在尝试使用 ReShake.js 库对数组中的某些元素进行动画处理。这是我的代码：

import { ShakeHorizontal } from 'reshake'
const state = {
    invalidWordSubmitted: true,
}
const isInvalidWordSubmitted = () => {
  return state.invalidWordSubmitted ? '.invalidWordSubmitted' : ''

}

//这是我认为导致问题的部分：

           <div id="gameBoard" className="gameBoard">         
        {board.map((row, rowNumber) =>
          row.map((letter, colNumber) => (
            <span
              key={colNumber}
            >
              <ShakeHorizontal trigger={`${isInvalidWordSubmitted()}`}>
              {letter}
              </ShakeHorizontal>
            </span>
          ))
        )}
      </div>

它工作正常，但浏览器有严重的延迟，控制台显示以下警告：

react_devtools_backend.js:4045 Over 200 classes were generated for component styled.div with the id of "sc-bdvvtL"

我应该为每个迭代的

<ShakeHorizontal>

组件添加唯一的 id 吗？ 我在文档中找不到任何内容：https://github.com/elrumordelaluz/reshake/tree/master/src

Answer 1

以内联样式完成它，就像我为时钟组件所做的那样

<div className="hourHand" style={{ transform: `rotate(${hour}deg)` }}></div>