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

【问题标题】：PrimeReact DataTable dynamic columns from custom component来自自定义组件的 PrimeReact DataTable 动态列
【发布时间】：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 只是一个例子。想象一下，还会有过滤器、格式化程序……基于条件。还是谢谢你。

标签： reactjs primereact

【解决方案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 中提出问题

【讨论】：