React添加css类而不重新渲染

Question

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

我的问题是,当一些状态正在改变时(例如,从)none到rejected我需要将此行标记为rejectedclassName并更改背景颜色.

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

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

Answer 1

是的，我找到了解决方案。我的一行中的每个单元格都有自己的组件。如您所知，从数组创建的每个元素都需要有keyprop。

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

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

所以最终的解决方案如下所示：

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

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