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

我正在尝试使用react.js库“react sortable hoc”（）创建一个可排序列表

在“SortableList”中，我在数组的每个元素上映射一个函数，该函数（应该）创建一个带有参数键、索引和值的“SortableElement”。以下是“SortableElement”的定义：

SortableItem=SortableElement（（{value，key}）=>
问题:
{
console.log（key）；//为什么未定义？？
console.log（值）；
}
}
/>
);
SortableList=SortableContainer（（{items}）=>{
返回(
{items.map（（值，索引）=>
)}
);
});

不幸的是，键和索引总是未定义的，我就是不明白为什么。如果您对完整代码感兴趣，请访问

---

非常感谢您的帮助。

如果您查看

react sortable hoc

的源代码，您会发现在渲染中传递道具时，

索引

被忽略。而且，

键

不会在道具中传递。如果将分解更改为在

SortableItem

中记录道具，您将看到一个仅包含值的对象（“问题1”、“问题2”等）。如果需要访问索引或键，请将它们作为不同的道具传递

e、 g

SortableItem=SortableElement（{value，yourIndex}）=>
问题:
{
log（你的索引）；
console.log（值）；
}
}
/>
);
SortableList=SortableContainer（（{items}）=>{
返回(
{items.map（（值，索引）=>
)}
);
});

好的，我需要访问sortable元素中的key。你说“将它们作为不同的道具传递”是什么意思？请注意示例中我传递的

yourIndex

prop。根据需要重命名它。

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>
    );
  });

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>
    );
});