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访问道具

在功能组件中，您只需使用该函数中的第一个参数直接从函数和访问道具返回jsx

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

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

2 个答案: