如何在抽象表格组件中传递自定义TableBody并复用数据Props

Hey，我刚解决了自己开发抽象表格组件时遇到的一个问题，分享出来给有同样需求的朋友参考：

问题场景 #

我正在做一个可自定义的抽象表格组件，包含TableHeader、TableBody、TableFooter三个基础模块（和原生表格结构对应），支持用户选择用默认组件，或者传入自定义组件（比如我自己写的<TableBody2>）。但一开始卡壳了：怎么把自定义的TableBody2传给表格组件，还能让它像默认组件那样正常使用表格的数据源？

我一开始的写法是这样的：

// 配置自定义模板，null代表用默认组件
let templates = {
  header: null,
  body: <TableBody2 data={this.state.data}/>,
  footer: null
}

// 把模板传给Table组件
<Table options={this.state.options} data={this.state.data} templates={templates}/>

但这样写的话，自定义组件里没法正确拿到数据props，完全不知道怎么处理。

解决方法 #

后来发现关键在于在Table组件内部调用自定义组件时，把Table自身的props传递过去，而不是在外部提前传data。

核心实现 #

在Table组件里，调用自定义body组件的时候，直接传入this.props：

this.props.templates.body(this.props)

自定义组件示例 #

这样调整后，我的TableBody2就能通过props拿到表格的所有数据了，比如：

function TableBody2(props){
  const tableData = props.data.map((data) => {
    return (
      <td key={data.userId}>{data.userId}</td>
    )
  });
  return (
    <tbody>
      <tr>
        {tableData}
      </tr>
    </tbody>
  )
}

现在TableBody2可以正常使用props.data来渲染自定义的表格内容啦～

内容的提问来源于stack exchange，提问作者nez1998