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은 소품으로 전달되지 않습니다. 로그 오프 소멸을 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> 
    ); 
});