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

Question

我想在 React-Virtualized table 中的每一行中添加一个额外的属性，以便自动化可以更轻松地识别生成的行数据，然后对其进行验证。

查看文档和代码，最简单的方法似乎是简单地复制 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 变成一个组件并将我的粗箭头渲染器变成一个带有状态的 class 函数，这样它就不会在每次渲染时都重新创建。

有没有我遗漏的更简单的方法？

Answer 1

我认为您对这 3 个几乎是正确的。我的投票是分叉默认渲染器。这将为您提供最佳性能（尽管差异可能很小）。至于您的维护问题，the row-renderer is pretty stable.

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

What would be the best way to add data-hooks to table row data

react-virtualized