This renders the header properly in that I can see a table with a "Product ID" header for the 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;

I'm trying to refactor it so I can reuse <DataTable /> and <Column /> given they are almost identical throughout the app:

我正试图重构它，这样我就可以重用它，因为它们在整个应用程序中几乎是相同的：

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

In this case, the <Column /> header is not rendered... inspecting the page elements for an occurrence of "Product ID" does not yield anything so it seems the <ColumnProductID /> is not being rendered.

在这种情况下， 头不会呈现...检查页面元素中是否出现“Product ID”不会产生任何结果，因此似乎没有呈现 。

Suggestions for what I am doing wrong here?

对我在这里做错了什么提出建议？

I did manage to get this to work, by doing:

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

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

But this is undesirable... in fact it is the very thing I'm trying to avoid and it is pointless to refactor <Column /> from primereact into a <ColumnProductID /> component. This effectively makes <ColumnProductID /> === <Column /> with an additional layer and unnecessary complexity.

但这是不受欢迎的..。事实上，这正是我试图避免的事情，将 从Primereact重构为 组件是没有意义的。这有效地使 = 增加了一层，并增加了不必要的复杂性。

The redundancy I'm trying to get around is this:

我想要解决的冗余是：

• A field named status, for example, can relate to all kinds of data: Customers, Companies, Products, Leads, etc. etc. etc.


• Whatever <DataTable /> this field status appears in, it should have the exact same props.


• If there are <DataTable /> for Customers, Companies, Products, Leads, and this <Column field='status' /> is in all of them, and you want to change something about it, then you have to go into each <DataTable /> and update it.


• But if you can make a <ColumnStatus /> component and pass that into the <DataTable /> then you only need to update it one place: in the <ColumnStatus /> component.

This is not currently possible with PrimeReact. Column is not a a "component" that renders itself so it cannot be wrapped or extended. The Datatable looks specifically for <Column> as children and not anything else.

目前，使用PrimeReact无法做到这一点。列不是呈现自身的“组件”，因此它不能被包装或扩展。DataTable专门将 作为子级查找，而不是其他任何内容。

See: https://github.com/primefaces/primereact/issues/2268

请参阅：https://github.com/primefaces/primereact/issues/2268

See: https://github.com/primefaces/primereact/issues/2052#issuecomment-1173678665

请参阅：https://github.com/primefaces/primereact/issues/2052#issuecomment-1173678665