如何在 react-sortable-hoc 中将功能组件更改为 class 组件

Question

如何将我的 functional 组件更改为 class 组件我的代码如下

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

我尝试更改此代码但对我不起作用。

Answer 1

在 class 组件中你需要实现 render 函数和 return 你的 jsx 来自这个函数并使用 this.props

访问道具

而在功能组件中，您只需 return jsx 直接来自函数并使用该函数中的第一个参数访问 props

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

(but I have too low rep to flag), and is pretty straightforward using the docs。但这是一个开始：

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

如何在 react-sortable-hoc 中将功能组件更改为 class 组件

how to change functional component to class component in react-sortable-hoc

reactjs

react-sortable-hoc