将数据挂钩添加到表行数据的最佳方法是什么答案

【问题标题】：What would be the best way to add data-hooks to table row data将数据挂钩添加到表行数据的最佳方法是什么
【发布时间】：2017-06-21 21:03:37
【问题描述】：

我想为 React-Virtualized 表中的每一行添加一个附加属性，以便自动化可以更轻松地识别结果行数据，然后对其进行验证。

查看文档和代码，似乎最简单的方法是简单地复制 defaultTableRender 并对其进行修改以添加我想要的数据挂钩，但是我不愿意这样做，因为我不想要维护跟踪对原始功能的更改并将其向前移植的成本。

另一种选择是将 defaultRowRenderer 的结果包装在具有我需要的属性的 div 中，例如：

      rowRenderer={(props) => {
        return (
          <div
            key={props.key}
            data-hook={data[props.index].id}>
            {defaultTableRowRenderer(props)}
          </div>
        )
      }}

这可行，但看起来非常笨重。

另一种选择是克隆元素，然后添加我想要的属性：

      rowRenderer={(props) => {
        return React.cloneElement(
          defaultTableRowRenderer(props),
          {'data-hook': data[props.index].id})
      }}

这可能是最干净的，尽管我怀疑我应该将我的 SFC 变成一个组件，并将我的粗箭头渲染器变成一个有状态的类函数，这样它就不会在每次渲染时重新创建。

有没有我想念的更简单的方法？

【问题讨论】：

标签： react-virtualized

【解决方案1】：

我认为您对这 3 个问题的看法基本正确。我的投票是分叉默认渲染器。这将为您提供最佳性能（尽管差异可能非常微不足道）。至于您的维护问题，the row-renderer is pretty stable。

【讨论】：

谢谢，正是我想要的答案:)