javascript - 从类到函数的重构——函数增强的方法

Question

我正在尝试将类组件重写为函数。

通常，我有一个增强组件作为类属性:

class Grid extends Component {

  tableCell = params => (
     <TableCell paging={this.props.paging} {...params} />
  )

  render() {
    return <Table tableCell={this.tableCell} />
  }
}

编写函数时，我必须将增强移到函数体之外，否则它将在每次渲染时重新安装。

const tableCell = params => <TableCell {...params} />

function Grid(props) {
  return <Table tableCell={tableCell} />
}

Table 是一个外部组件(devexpressGrid)，但我认为它的作用如下:

function Table(props) {
  const TableCell = props.tableCell
  return <TableCell param1={true} param2={true} />
}

有没有办法仍然将 Prop 从 Grid 传递到 tableCell？这个 prop 不是来自任何 redux store，它是在渲染 Grid 时给出的，如下所示:

return <Grid paging="infinite-scroll" />

您可以在此处看到差异:

https://codesandbox.io/s/w2y76w53ww?fontsize=14

Answer 1

您可以创建一个内联新函数并将其直接赋予 tableCell 属性。

function Grid(props) {
  return (
    <Table tableCell={params => <TableCell paging={paging} {...params} />} />
  )
}

如果你不想每次渲染都创建一个新函数，你可以使用 useCallback钩子(Hook)。

function Grid(props) {
  const tableCell = useCallback(
    params => <TableCell paging={paging} {...params} />,
    [paging]
  );

  return <Table tableCell={tableCell} />;
}