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

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

This has been answered before（但我的代表太低无法标记），使用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>;
  }
}

Answer 2

在类组件中你需要实现render函数并从这个函数返回你的jsx并使用this.props访问props

在函数式组件中，您只需直接从函数返回 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>
    )
  }
}