Ant Design Table 列提取为独立组件后渲染异常问题咨询

Ant Design的JSX风格Table列配置，是通过解析<Table />组件下直接嵌套的<Column />、<Column.Group />子节点生成列配置的。你将<Column />封装为独立自定义组件后，Table组件无法跨自定义组件层级识别到内部的Column节点，因此无法生成正确的列配置，最终导致数据无法正常渲染。

你可以根据自己的业务场景选择以下任意一种方案处理：

• 方案1：不将<Column />封装为独立自定义组件，仅把列的配置项抽为独立数组，再通过循环渲染Column节点

// 抽离列配置项
const tableColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }
]

// 表格内渲染列
<Table dataSource={tableData}>
  {tableColumns.map(col => <Column {...col} key={col.key} />)}
</Table>

• 方案2：如果需要封装列的相关逻辑，可以封装为返回<Column />节点的工具函数，不要封装为标准React组件

// 封装为工具函数，直接返回Column节点
const getNameColumn = () => {
  // 可在此处添加自定义逻辑，比如权限校验、动态控制列显隐等
  return <Column title="姓名" dataIndex="name" key="name" render={text => <b>{text}</b>} />
}

// 表格内直接调用函数获取节点
<Table dataSource={tableData}>
  {getNameColumn()}
  <Column title="年龄" dataIndex="age" key="age" />
</Table>

• 方案3：改用AntD Table的对象数组式列配置，把完整列配置整体抽离，通过columns属性传给Table，是官方更推荐的列抽离方式，性能更优

// 可单独抽离到独立文件中维护
export const tableColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <span style={{ color: '#1890ff' }}>{text}</span>
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }
]

// 业务组件中引入使用
import { tableColumns } from './tableConfig'

<Table dataSource={tableData} columns={tableColumns} />

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