重构PrimeReact Column组件后列头无法正常渲染的问题排查

初始可正常运行的代码 #

以下代码能正常渲染带有“Product ID”列头的表格：

// DataTable.tsx
// React Imports
import React, { useState } from 'react';

// PrimeReact Imports
import { DataTable as DT } from 'primereact/datatable';
import { Column } from 'primereact/column';

// Custom Imports
import DataTableHeader from './DataTableHeader';

const DataTable = (): JSX.Element => {
  const [rowData, setRowData] = useState([]);
  return (
    <DT
      value={rowData}
      emptyMessage='Run the utility first.'
      size='small'
    >
      <Column field='product_id' header='Product ID' />
    </DT>
  );
};

export default DataTable;

重构后的代码（列头不渲染） #

为实现DataTable和Column组件复用，我做了如下重构，但此时列头“Product ID”未渲染，页面元素中也找不到该内容，ColumnProductID组件似乎未生效：

DataTable.tsx #

// DataTable.tsx
// React Imports
import React, { useState } from 'react';

// PrimeReact Imports
import { DataTable as DT } from 'primereact/datatable';

// Custom Imports
import DataTableHeader from './DataTableHeader';
import ColumnProductID from './ColumnProductID';

const DataTable = (): JSX.Element => {
  const [rowData, setRowData] = useState([]);
  return (
    <DT
      value={rowData}
      emptyMessage='Run the utility first.'
      size='small'
    >
      <ColumnProductID />
    </DT>
  );
};

export default DataTable;

ColumnProductID.tsx #

// ColumnProductID.tsx

import React from 'react';

// PrimeReact Imports
import { Column } from 'primereact/column';

const ColumnProductID = (): JSX.Element => {
  return <Column field='product_id' header='Product ID' />
};

export default ColumnProductID;

冗余的可行方案（失去重构意义） #

我尝试了以下方式实现功能，但这种写法冗余，完全失去了重构的意义：

DataTable.tsx #

// DataTable.tsx
// React Imports
import React, { useState } from 'react';

// PrimeReact Imports
import { DataTable as DT } from 'primereact/datatable';

// Custom Imports
import DataTableHeader from './DataTableHeader';
import ColumnProductID from './ColumnProductID';

const DataTable = (): JSX.Element => {
  const [rowData, setRowData] = useState([]);
  return (
    <DT
      value={rowData}
      emptyMessage='Run the utility first.'
      size='small'
    >
      <ColumnProductID field='product_id' header='Product ID' />
    </DT>
  );
};

export default DataTable;

ColumnProductID.tsx #

// ColumnProductID.tsx

import React from 'react';

// PrimeReact Imports
import { Column } from 'primereact/column';

interface ColumnProductIDProps {
  field: string;
  header: string;
}

const ColumnProductID = (props: ColumnProductIDProps): JSX.Element => {
  return <Column field={props.field} header={props.header} />
};

export default ColumnProductID;

核心需求 #

我希望解决的场景是：比如status字段会出现在客户、公司、产品等多个DataTable中，且列的属性完全一致。如果能封装成ColumnStatus组件，后续修改该列时只需改动这个组件就能统一更新所有表格，不用逐个修改每个表格里的列配置。

请问我的重构方式哪里出错了？

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