来自自定义组件的 PrimeReact DataTable 动态列

Question

我想动态呈现在 ParentComponent 的子元素中给出的列，如 CustomColumns 这样：

import { Column } from 'primereact/column';
import { DataTable } from 'primereact/datatable';

function TetsPage(): JSX.Element {
    return (
        <ParentComponent>
            <CustomColumn field="name" header="Name" />
        </ParentComponent>
    );
}

export class ParentComponent extends React.Component<Props, State> {
    ................................
    render(): JSX.Element {        
        // result:   <Column field="name" header="Name" />
        // expected: <Column field="name" header="Name" sortable={true}/>
        return (
            <DataTable value={this.state.list}>
                {this.props.children}
            </DataTable>
        );
     }
}


export class CustomColumn extends React.Component<Props, State> {
    .................................
    render(): JSX.Element {
        return (
            <Column field={this.props.field} header={this.props.header} sortable={true} />
        )
    }
}

问题是 DataTable 组件呈现它自己的 Column 组件而不是我的 CustomColumn这是 customized/extended 版本的 Column 组件。

如何让我的 CustomColumn 呈现为 DataTable 中的动态列？

这里是CodeSandbox

Answer 1

请为相同的 https://codesandbox.io/s/loving-snow-qlp8c

查找更新的沙盒

这其实是个很好的问题！经过大量的敲打之后，我找到了解决方案。其实问题不在于你写react组件的方式，而是DataTable的Column的问题。如果你查看他们的 GITHUB 代码，你会发现它只是 Component 和 defaultProps。您只需要将 sortable 作为 defaultProps 传递给您的 CustomColumn 组件和 TADA！它应该有效。

我想补充一下为什么它使用 field 和 header 的道具，这是因为当 Column 被实例化时 field 和 header 是用 props 实例化的，所以 defaultProps 不会出现。但是当你从 CustomColumn 传递 sortable 时，React 无法理解它必须再次重新实例化 props 因为组件已经实例化并且道具没有变化因为 Column 组件只是一个带有 defaultProps 的组件。 primereact 人以这种方式设计组件是非常蹩脚的。您也可以在他们的 GITHUB

中提出问题

来自自定义组件的 PrimeReact DataTable 动态列

PrimeReact DataTable dynamic columns from custom component

reactjs

primereact