使用 ES6 将参数传递给 React 组件

Question

我正在尝试使用 react.js 库 "react-sortable-hoc" (https://github.com/clauderic/react-sortable-hoc) 创建一个可排序列表。

在 "SortableList" 中，我在数组的每个元素上映射一个函数，它（应该）用参数 key、[=22= 创建一个 "SortableElement" ]index 和 value。 "SortableElement" 是这样定义的：https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableElement/index.js

SortableItem = SortableElement(({value,key}) =>
    <Row>
      <this.DragHandle/>
      <ControlLabel>Question</ControlLabel>
      <FormControl
        componentClass="textarea"
        placeholder="Enter question"
        onChange={()=> {
          console.log(key);       //why undefined??
          console.log(value);
        }
        }
      />
    </Row>);

SortableList = SortableContainer(({items}) => {
    return (
      <div>
        {items.map((value, index) =>
          <this.SortableItem key={`item-${index}`}
                             index={index}
                             value={value}/>
        )}
      </div>
    );
  });

不幸的是，key 和 index 总是未定义的，我只是不明白为什么。如果您对完整代码感兴趣，请访问 https://github.com/rcffc/react-dnd-test/blob/master/src/SortableComponent.js

感谢任何帮助。

Answer 1

如果您查看 react-sortable-hoc 的源代码，您会发现在渲染中传递道具时，省略了 index。此外，key 未在 props 中传递。如果您将解构更改为在 SortableItem 中记录道具，您将看到一个仅包含值（'Question 1'、'Question 2' 等）的对象。如果您需要访问索引或键，请将它们作为不同的道具传递。

例如

SortableItem = SortableElement(({value,yourIndex}) =>
    <Row>
      <this.DragHandle/>
      <ControlLabel>Question</ControlLabel>
      <FormControl
        componentClass="textarea"
        placeholder="Enter question"
        onChange={()=> {
          console.log(yourIndex);
          console.log(value);
        }
        }
      />
    </Row>
);

SortableList = SortableContainer(({items}) => {
    return (
      <div>
        {items.map((value, index) =>
          <this.SortableItem key={`item-${index}`}
                             index={index}
                             value={value}
                             yourIndex={index} />
        )}
      </div>
    );
});

使用 ES6 将参数传递给 React 组件

Passing arguments to React component using ES6

javascript

destructuring

ecmascript-6

reactjs

arrow-functions