Javascript 重构 后列标题未按预期呈现

这正确地呈现了标题，因为我可以看到一个列带有"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;

我正在try 重构它，这样我就可以重复使用<DataTable />和<Column />，因为它们在整个应用程序中几乎完全相同:

// 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

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;

在这种情况下，不会呈现<Column />标题...判断页面元素中出现的"Product ID"不会产生任何结果，因此<ColumnProductID />似乎没有被呈现.

Suggestions for what I am doing wrong here?个

我确实设法让这件事奏效了，通过以下方式:

// 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

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={field} header={header} />
};

export default ColumnProductID;

但这是不受欢迎的...事实上，这正是我试图避免的事情，将<Column />从primereact重构为<ColumnProductID />组件是没有意义的.这实际上使<ColumnProductID /> === <Column />具有额外的层和不必要的复杂性.

我想要解决的冗余是:

• 例如，名为status的字段可以与所有类型的数据相关:客户、公司、产品、销售线索等.
• 无论这个字段status出现在<DataTable />中，它都应该有完全相同的props .
• 如果有<DataTable />个代表客户、公司、产品、销售线索，而这<Column field='status' />个都在其中，而你想要对它做出一些改变，那么你必须进入每一个<DataTable />并更新它.
• 但是，如果您可以生成一个<ColumnStatus />分量并将其传递到<DataTable />，那么您只需要更新它的一个位置:在<ColumnStatus />分量中.