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

Posted 2023-02-22

【中文标题】来自自定义组件的 PrimeReact DataTable 动态列

【英文标题】：PrimeReact DataTable dynamic columns from custom component

【发布时间】：2020-02-26 17:13:05

【问题描述】：

我想将 ParentComponent 的子级中给出的列动态呈现为 CustomColumn，如下所示：

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，它是 的自定义/扩展版本列组件。

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

这里是CodeSandbox

【问题讨论】：

你能把这段代码加到codesandbox或者jsfiddle里吗？

@NihalSaxena 我已经添加了 CodeSandbox 的链接；）

CustomColumn中自定义的部分是什么？

检查这个：codesandbox.io/s/stoic-chaplygin-ky4dt

@NihalSaxena 我明白你在做什么，但CustomColumn 组件的目的是降低定义列期间的复杂性。 sortable 只是一个例子。想象一下，还会有过滤器、格式化程序……基于条件。还是谢谢你。

【参考方案1】：

请找到相同https://codesandbox.io/s/loving-snow-qlp8c的更新沙盒

这实际上是一个非常好的问题！经过大量的头撞后，我找到了解决方案。实际上，问题不在于您编写 react 组件的方式，而在于 DataTable 的 Column 的问题。如果你查看他们的 GITHUB 代码，你会发现它只是一个 Component 和 defaultProps。您只需将sortable 作为defaultProps 传递给您的CustomColumn 组件和TADA！它应该可以工作。

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