React添加css类没有渲染

React adding css class without rerender

本文关键字：添加 css React      更新时间：2023-09-26

在我的项目中，我有一个表，每一行都有自己的类取决于状态。我也有固定的列，所以当我做水平滚动时，一些列是固定的。

我的问题是，当某些状态发生变化时(例如;从none到rejected)我需要将这一行标记为rejected className并更改背景颜色。

使用setState是有问题的，因为整个行被重新渲染，所以我的粘性列消失了(我对每个scroll事件进行计算)。

问题是:有没有其他的解决方案来改变反应className没有重新渲染我的行?(除了jQuery)

更改Row组件中的状态，以便更新类。然后，在你的子组件上使用PureComponent (https://github.com/facebook/react/pull/7195)，这样它们就不会呈现，除非它们自己的道具改变了。这样解决你的问题了吗?

我找到解决办法了。一行中的每个单元格都有自己的组成部分。正如你所知道的，从数组创建的每个元素都需要有key prop。

return (
  <tr>
    {cells.map(cell => (<td key={_.uniqueId()}>{cell.val}</td>))
  </tr>
)

我过去经常传递lodash的_.uniqueId()值-这导致了我的问题。解决方案是用一些唯一的字符串替换这个唯一的id，在我的例子中是两个id和列名的组合。

所以最终解看起来像:

return (
  <tr>
    {cells.map(cell => {
      const keyId = `${row.id}${cell.id}${cell.name}`
      return (<td key={keyId}>{cell.val}</td>})
    }}
  </tr>
)

这是为什么它被破坏和重新渲染的解释:https://facebook.github.io/react/docs/multiple-components.html dynamic-children

相关文章：