React如何在不重新渲染的情况下添加CSS类？

Question

在我的项目中，我有一个表格，每一行都有自己的类，取决于状态。我还有固定的列，因此当我进行水平滚动时，一些列被固定。

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

使用setState存在问题，因为整个行会重新渲染，所以我的粘性列会消失（我在每个滚动事件上进行计算）。

问题是：是否有其他解决方案可以在不重新渲染行的情况下更改react className？（除了jQuery）

- Rafal Lesniak

---

我非常确定改变状态是正确的方法。在重新渲染并恢复视图之后，您可以触发计算吗？如果需要，您也可以将坐标保存在状态中。 - EugZol

Answer 1

更改您的Row组件中的状态，以便更新类。然后，在子组件上使用PureComponent(https://github.com/facebook/react/pull/7195)，以使它们不会重新渲染，除非它们自己的props发生了更改。这解决了您的问题吗？

- zackify

Answer 2

是的，我找到了解决方案。 我的每个单元格都有自己的组件。正如您所知，从数组创建的每个元素都需要具有key属性。

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

- Rafal Lesniak