Javascript 将类转换为const无状态函数

下面您好，我有一个不使用任何生命周期方法或状态的类，我已经阅读了有关将此类类转换为常量的文档。然而，我不确定我是如何与下面的阶级斗争的：

class ContractsTableHead extends Component {
  createSortHandler(property) {
    return event => {
      this.props.onRequestSort(event, property);
    };
  }

  render() {
    const { order, orderBy } = this.props;
    return (
      <TableHead>
        <TableRow>
          {rows.map(
            row => (
              <TableCell
                key={row.id}
                align={row.numeric ? "right" : "left"}
                padding={row.disablePadding ? "none" : "default"}
                sortDirection={orderBy === row.id ? order : false}
              >
                <Tooltip
                  title="Sort"
                  placement={row.numeric ? "bottom-end" : "bottom-start"}
                  enterDelay={300}
                >
                  <TableSortLabel
                    active={orderBy === row.id}
                    direction={order}
                    onClick={this.createSortHandler(row.id)}
                  >
                    {row.label}
                  </TableSortLabel>
                </Tooltip>
              </TableCell>
            ),
            this
          )}
        </TableRow>
      </TableHead>
    );
  }
}

ContractsTableHead.propTypes = {
  onRequestSort: PropTypes.func.isRequired,
  order: PropTypes.string.isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired
};

export default ContractsTableHead;

class ContractsTableHead扩展组件{
createSortHandler（属性）{
返回事件=>{
this.props.onRequestSort（事件、属性）；
};
}
render（）{
const{order，orderBy}=this.props；
返回(
{rows.map(
行=>(
{row.label}
),
这
)}
);
}
}
ContractsTableHead.propTypes={
onRequestSort:PropTypes.func.isRequired，
订单：PropTypes.string.isRequired，
orderBy:PropTypes.string.isRequired，
行数：需要PropTypes.number.isRequired
};
导出默认合同Stablehead；

如果将类组件变成函数组件，则需要将方法

createSortHandler

也变成常规函数：

const ContractsTableHead = props => {
  const createSortHandler = property => {
    return event => {
      props.onRequestSort(event, property);
    };
  };
  const { order, orderBy } = props;

  return (
    <TableHead>
      <TableRow>
        {rows.map(row => (
          <TableCell
            key={row.id}
            align={row.numeric ? "right" : "left"}
            padding={row.disablePadding ? "none" : "default"}
            sortDirection={orderBy === row.id ? order : false}
          >
            <Tooltip
              title="Sort"
              placement={row.numeric ? "bottom-end" : "bottom-start"}
              enterDelay={300}
            >
              <TableSortLabel
                active={orderBy === row.id}
                direction={order}
                onClick={createSortHandler(row.id)}
              >
                {row.label}
              </TableSortLabel>
            </Tooltip>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
};

const ContractsTableHead=props=>{
const createSortHandler=属性=>{
返回事件=>{
onRequestSort（事件、属性）；
};
};
常量{order，orderBy}=props；
返回(
{rows.map（row=>(
{row.label}
))}
);
};