如何将索引传递给 rowRenderer？

Question

https://codesandbox.io/s/qYEvQEl0

我尝试渲染一个可拖动列表，一切似乎都很好，只是我不知道如何将“索引”传递给 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 值。但是，只要您将它们复制到自己的自定义道具中，就可以了。