ES6を使用してReactコンポーネントに引数を渡す

Question

react.jsライブラリ "react-sortable-hoc"（https://github.com/clauderic/react-sortable-hoc）でソート可能なリストを作成しようとしています。 「SortableList」で

Iは、引数で「SortableElement」を作成する（べき）配列の各要素に機能キー、インデックスと値をマッピングします。これは、「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> 
    ); 
    }); 

残念ながら、キーとインデックスは常に定義されていない、と私はなぜ理解していません。フルコードに興味がある場合は、https://github.com/rcffc/react-dnd-test/blob/master/src/SortableComponent.js

をご覧ください。

Answer 1

react-sortable-hocのソースを見ると、レンダリングで小道具を渡すときにindexが省略されていることがわかります。また、keyはpropsに渡されません。消滅をlog propsに変更してSortableItemにすると、値（ '質問1'、 '質問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> 
    ); 
});