Реагирующий компонент DevExtreme DataGrid, проблема с мастером / деталями - PullRequest
Новая
       22

Реагирующий компонент DevExtreme DataGrid, проблема с мастером / деталями

0 голосов
/ 27 сентября 2018

Мне нужна помощь в использовании шаблона Master / Detail в компоненте DataGrid пакета DevExtreme для реагирования.У меня есть следующие ошибки:

# Вышеупомянутая ошибка произошла в компоненте: в DataGrid (создан App) в div (создан App) в App #

# TypeError: contentProvider isне функция #

Кажется, DataGrid не хочет работать с шаблоном, так как ошибка произошла только при наличии шаблона в коде. 

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DataGrid, {Column,FilterRow,Pager,Paging,Editing,ColumnLookup} from "devextreme-react/ui/data-grid";
import * as AspNetData from "devextreme-aspnet-data-nojquery";
import { Template } from 'devextreme-react/core/template';

export default class App extends React.Component<any, IProp> {
        ....

    public render() {
        return (
            <div>
            <DataGrid
                dataSource={this.state.dataSource}
                remoteOperations={true}
                masterDetail={{enabled: true, template: "details"}}>

                <Template name="details">
                    <div>Hello</div>
                </Template>


                <Column dataField="name" caption="Наименование ДУ"/>
                <Column dataField="mnemoCode" caption="Мнемокод" dataType="string" />

                <Pager
                    allowedPageSizes={[5, 10, 15, 20]}
                    showPageSizeSelector={true}
                    showInfo={true}
                />
                <Paging
                    defaultPageIndex={0}
                    defaultPageSize={10}
                />
                </DataGrid>
            </div>
        );
    }
}

1 Ответ

0 голосов
/ 27 сентября 2018

Компонент Template требует рендера или реквизита компонента (включенный контент не поддерживается).

Я бы рекомендовал использовать конфигурационный компонент MasterDetail, а не Template: 

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DataGrid, {Column,FilterRow,Pager,Paging,Editing,ColumnLookup, MasterDetail} from "devextreme-react/ui/data-grid";
import * as AspNetData from "devextreme-aspnet-data-nojquery";

const DetailComponent = (props: any) => {
    return (
        <p>Row data:
            <br/>
            {JSON.stringify(props.data)}
        </p>
    );
};

export default class App extends React.Component<any, IProp> {
        ....

    public render() {
        return (
            <div>
            <DataGrid
                dataSource={this.state.dataSource}
                remoteOperations={true}>

                <Template name="details">
                    <div>Hello</div>
                </Template>


                <Column dataField="name" caption="Наименование ДУ"/>
                <Column dataField="mnemoCode" caption="Мнемокод" dataType="string" />

                <Pager
                    allowedPageSizes={[5, 10, 15, 20]}
                    showPageSizeSelector={true}
                    showInfo={true}
                />
                <Paging
                    defaultPageIndex={0}
                    defaultPageSize={10}
                />
                <MasterDetail enabled={true} component={DetailComponent} />
                </DataGrid>
            </div>
        );
    }
}
...