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

Question

我需要一些帮助来使用DevExtreme包的DataGrid组件中的Master / Detail模式进行反应。我有这些错误：

＃组件中出现上述错误：在App＃中的div（由App创建）中的DataGrid（由App创建）

#TypeError：contentProvider不是函数＃

似乎DataGrid不希望使用Template，因为只有在代码中存在模板时才会发生错误。

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

Template组件需要渲染或组件道具（不支持已转换的内容）。

我建议使用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>
        );
    }
}