如何将索引传递给 rowRenderer？

Question

https://codesandbox.io/s/qYEvQEl0

我尝试渲染一个可拖动列表，一切似乎都很好，只是我不知道如何将 'index' 传递给 rowRenderer

如果我这样做rowRenderer=props => <Row {...props}/>，index就成功传递了。

但如果我这样做：

const SortableRow = SortableElement(Row)

rowRenderer=props => <SortableRow {...props}/> ,

index 不知何故被阻塞，无法传递到 <Row/>

基本上，我不明白用 HOC 包装 <Row/> 组件会出什么问题？为什么有的道具可以通过，有的不能？

Answer 1

将索引复制到不同的自定义属性中...

rowRenderer = props => {
  console.log(props.index);
  return <SortableRow {...props} indexCopy={props.index} />;
};

然后，在子组件中，改为引用此自定义道具。

const Row = ({ indexCopy , style }) => {
  console.log(indexCopy);
  return (
    <div style={style}>
      <span>drag</span>
      <input placeholder={'haha'} />
      <span>index={indexCopy || 'undefined'}</span>
    </div>
  );
};

我不太熟悉 HOC，但我怀疑 react-sortable-hoc 库正在剥离隐式的 index 和 key 值。但是，只要将它们复制到自己的自定义道具中，就可以了。

如何将索引传递给 rowRenderer？

How do you pass index into rowRenderer?

reactjs

react-virtualized