1

我想动态呈现在ParentComponent的子项中给出的列作为CustomColumn s，如下所示：

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，后者是 Column 组件的定制/扩展版本。

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

这是代码沙箱

4

1 回答 1

3

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

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

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

于 2019-11-04T14:18:00.420 回答