wie funktionale Komponente zu Komponente Klasse in reagieren sortierbar-hoc

Question

zu ändern, wie meine functional Komponente class Komponente meines Code unten

const SortableList = SortableContainer(
    ({ items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler}) => (
    <div> 
     {items.map((value, index) => (
     <SortableItem 
      key={`item-${index}`} 
      SpeedGraph={SpeedGraph} 
      StepLengthGraph={StepLengthGraph} 
      CadenceGraph={CadenceGraph} 
      PaceGraph={PaceGraph} 
      graphPopupHandler={graphPopupHandler} 
      index={index} 
      value={value} 
     /> 
    ))} 
    </div> 
) 
); 

ist ändern ich versuche, diesen Code zu ändern, aber nicht für mich arbeiten.

Answer 1

In der Klasse Komponenten benötigen Sie render Funktion und zurück Ihre jsx von dieser Funktion und dem Zugang Requisiten implementieren this.props

Während in funktionalen Komponenten verwenden Sie nur das Rück jsx direkt von der Funktion und dem Zugang Requisiten in dieser Funktion erstes Argument

class SortableList extends React.Component { 
    render(){ 
    const { items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler} = this.props; 
    return(
     <div> 
     {items.map((value, index) => (
     <SortableItem 
      key={`item-${index}`} 
      SpeedGraph={SpeedGraph} 
      StepLengthGraph={StepLengthGraph} 
      CadenceGraph={CadenceGraph} 
      PaceGraph={PaceGraph} 
      graphPopupHandler={graphPopupHandler} 
      index={index} 
      value={value} 
     /> 
    ))} 
    </div> 
    ) 
    } 
} 

Answer 2

This has been answered before (aber ich habe zu niedrig rep-Flag) und ist ziemlich einfach die docs verwenden. Aber hier ist ein Anfang:

class SortableList extends React.Component { 
    constructor(props) { 
    super(props); 
    //any initialization here or in other react class methods 
    } 

    render() { 
    const {items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler} = this.props; 
    return <div> 
     {items.map((value, index) => (
     <SortableItem 
      key={`item-${index}`} 
      SpeedGraph={SpeedGraph} 
      StepLengthGraph={StepLengthGraph} 
      CadenceGraph={CadenceGraph} 
      PaceGraph={PaceGraph} 
      graphPopupHandler={graphPopupHandler} 
      index={index} 
      value={value} 
     /> 
    ))} 
    </div>; 
    } 
}