Динамические столбцы PrimeReact DataTable из пользовательского компонента - PullRequest
Новая
       10

Динамические столбцы PrimeReact DataTable из пользовательского компонента

0 голосов
/ 31 октября 2019

Я хочу визуализировать столбцы динамически, которые задаются внутри детей 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 s, отображаемых как динамические столбцы внутри DataTable ?

Вот CodeSandbox

1 Ответ

2 голосов
/ 04 ноября 2019

Пожалуйста, найдите обновленную песочницу для того же https://codesandbox.io/s/loving-snow-qlp8c

Это на самом деле очень хороший вопрос! После большого количества ударов головой я нашел решение. На самом деле, проблема не в том, как вы написали компонент реагирования, а в том, что Column из DataTable. Если вы посмотрите на их код GITHUB, вы обнаружите, что это просто Component с defaultProps. Вам просто нужно передать sortable как defaultProps вашему CustomColumn компоненту и TADA! Он должен работать.

Я хотел бы добавить, почему он работал с реквизитом для field и header, потому что когда был создан экземпляр Column, были созданы экземпляры field и headerс props так что defaultProps не доходит до картинки. Но когда вы передавали sortable из CustomColumn, у React не было возможности понять, что он должен заново создать экземпляр props, так как компонент уже создан, и для реквизита как компонента Column никаких изменений нет. это просто компонент с defaultProps. Для primereact очень нехорошо проектировать компоненты таким способом. Вы также можете поднять вопрос в их GITHUB

...