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

Question

我想将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部件，而不是我的CustomColumnolumn>组件的自定义/扩展版本。

如何将CustomColumn渲染为DataTable中的动态列？

这是CodeSandbox

Answer 1

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

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

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