Question

我需要一些帮助，以使用DevExtreme软件包的DataGrid组件中的Master / Detail模式进行反应。我遇到了这些错误：

＃上面的错误发生在组件中：在DataGrid中（由App创建）在div中（由App创建）在App＃

中

#TypeError：contentProvider不是函数＃

似乎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>
        );
    }
}

Answer 1

“模板”组件需要渲染或组件道具（不支持包含的内容）。

我建议使用MasterDetail配置组件而不是模板：

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>
        );
    }
}

DevExtreme DataGrid反应组件，主/细节问题

1 个答案: