如何使用“模板”和"rowTemplate“字段在同步反应DataGrid？

Question

在我的应用程序中，我正在从React同步中建立一个数据网格表。

我的应用程序是用antDesign Pro模板、DvaJS、UmiJS和ReactJS构建的。我制作了基本的同步数据网格，它使用默认字段来获取单元数据，并且运行良好。

一旦我将“模板”字段添加到ColumnDirective或将"rowTemplate“添加到GridComponent中，我就会得到错误。

import React, { Component } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { Input } from 'antd';
import moment from 'react-moment';
import { ColumnDirective, ColumnsDirective, Filter, Grid, GridComponent } from '@syncfusion/ej2-react-grids';

@connect(({loading, data})=> ({
  data: data.data,
  loading: loading.effects['data/fetchData']
}))
class dataComponent extends Component {
  constructor(){
    super(...arguments);
    this.state = {
      data: [],
    }
    this.columnTemplate = this.columnTemplate;
  }    

  columnTemplate(props) {  
   return (
       <div className="image"><p>text</p></div>
    );
  }

render() {
    const { match, children, location, dispatch, data} = this.props;
    return (               
       <GridComponent dataSource={data}>
            <ColumnsDirective>
                 <ColumnDirective headerText='Heading' template={this.columnTemplate}/>
                 <ColumnDirective field='EmployeeID' headerText='Employee ID'/>
                 <ColumnDirective field='FirstName' headerText='Name'/>                       
             </ColumnsDirective>
       </GridComponent>
   );
}

预期产出：

标题雇员ID FirstName

案文123约翰

实际上，在向代码中添加模板字段后，它不会呈现任何内容。

在控制台中，我得到以下错误：

Uncaught : str.match不是函数

at evalExp (template.js:65)
at compile (template.js:52)
at Object.push../node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:57)
at compile (template-engine.js:16)
at templateCompiler (util.js:145)
at new Column (column.js:131)
at prepareColumns (util.js:185)
at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (grid.js:704)
at GridComponent.push../node_modules/@syncfusion/ej2-react-grids/src/grid/grid.component.js.GridComponent.render (grid.component.js:35)
at finishClassComponent (react-dom.development.js:14741)
at updateClassComponent (react-dom.development.js:14696)
at beginWork (react-dom.development.js:15644)
at performUnitOfWork (react-dom.development.js:19312)
at workLoop (react-dom.development.js:19352)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at replayUnitOfWork (react-dom.development.js:18578)
at renderRoot (react-dom.development.js:19468)
at performWorkOnRoot (react-dom.development.js:20342)
at performWork (react-dom.development.js:20254)
at performSyncWork (react-dom.development.js:20228)
at requestWork (react-dom.development.js:20097)
at scheduleWork (react-dom.development.js:19911)
at Object.enqueueSetState (react-dom.development.js:11169)
at DynamicComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
at dynamic.js:91

当我单击template.js:65时，它会显示以下错误：

变量isClass =str.match(/class=“(^”+x)s{2}/g)；

下面是我试图遵循的代码链接：同步模板示例

我非常感谢你的帮助！

Answer 1

查询1:如何在React平台上使用同步EJ2网格上的列模板。

您可以在EJ2网格列中自定义自己的元素，而不是字段值。有关更多信息，请参考下面的代码示例、示例和帮助文档。

export class ColumnTemplate extends SampleBase { 
constructor() { 
    super(...arguments); 
    this.template = this.gridTemplate; 
} 
gridTemplate(props) { 

     return ( 
   <div className="image"><p>text</p></div>  //Here defined your element 
); 
} 
render() { 
    return (<div className='control-pane'> 
            <div className='control-section'> 
                <GridComponent dataSource={employeeData} width='auto' height='359'> 
                    <ColumnsDirective> 
                        <ColumnDirective headerText='Heading' width='180' template={this.template} textAlign='Center'/> 
                        <ColumnDirective field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'/> 
                        <ColumnDirective field='FirstName' headerText='Name' width='120'/>                            
                    </ColumnsDirective> 
                </GridComponent> 
            </div> 
        </div>); 
} 

}

示例链接：https://stackblitz.com/edit/react-gdraob?file=index.js

帮助文档：https://ej2.syncfusion.com/react/documentation/grid/columns/#column-template

查询2:如何在React平台上使用同步EJ2网格上的行模板。

我们已经为EJ2网格提供了行模板特性支持，它是行的允许模板，并且我们已经呈现了元素而不是每个网格行。有关更多信息，请参考下面的代码示例、示例和帮助文档。

export class RowTemplate extends SampleBase { 
constructor() { 
    super(...arguments); 
    this.format = (value) => { 
        return instance.formatDate(value, { skeleton: 'yMd', type: 'date' }); 
    }; 
    this.template = this.gridTemplate; 
} 
gridTemplate(props) { 

    return (<tr className="templateRow">             
        <td className="details"> 
            <table className="CardTable" cellPadding={3} cellSpacing={2}> 
                   .     .     .     . 
                </tbody> 
            </table> 
        </td> 
    </tr>); 
} 
render() { 
    return (<div className='control-pane'> 
            <div className='control-section'> 
                <GridComponent dataSource={employeeData} rowTemplate={this.template.bind(this)} width='auto' height='335'> 
                    <ColumnsDirective>                             
                        <ColumnDirective headerText='Employee Details' width='300' textAlign='Left' /> 
                    </ColumnsDirective> 
                </GridComponent> 
            </div> 
       </div>); 
} 

}

示例链接：https://stackblitz.com/edit/react-ka9ixk?file=index.js

如果你需要进一步的帮助，请回复我们。

致以敬意，

Thavasianand S.