Question

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

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

另一个选择是将一个defaultRowRenderer的结果包含在一个div中，该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变成一个Component并将我的胖箭头渲染器变成一个具有状态的类函数，以便它不会在每次渲染时重新创建。

我是否有一种更简单的方法？

Answer 1

我认为你已经完全正确使用那些3.我的投票将是分叉默认渲染器。这将为您提供最佳性能（尽管差异可能非常微不足道）。至于您的维护问题，the row-renderer is pretty stable。

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

1 个答案: