Question

我正在使用反应，我想在我的一个组件中渲染一个syncfusion网格。但是我遇到了网格的一个组件问题。找不到网格组件ej。我尝试过多种方式进口，但我没有成功。有谁有这个问题，并找到了解决方案？ Error Message

示例代码：

import React, { Component } from "react";
import $ from "jquery";
//This import does not find the component (ej) needed to render the grid
import  {ej} from "syncfusion-javascript";
//There are scripts in the index.html file to mount the grid according to 
the Syncfusion documentation

class GridSeries extends Component {

constructor() {
    super();
    this.menuGrid = this.menuGrid.bind(this);
}

//Function responsible for mounting the grid it is called inside my render method
menuGrid() {
    $(function () {
        $("#Grid").ejGrid({
            dataSource: teste,
            allowPaging: true,
            allowSorting: true,
            allowGrouping: true,
            allowFiltering: true,
            allowReordering: true,
            allowMultiSorting: true,
            filterSettings: {filterType: "excel"},
            toolbarSettings: {showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport]},
            columns: [
                {type: "checkbox", width: 50},
                {field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right},
                {field: "CustomerID", headerText: "Customer ID", width: 80},
                {field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right},
                {field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right},
                {field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right},
                {field: "ShipCity", headerText: "Ship City", width: 110}
            ],
            toolbarClick: function (e) {
                this.exportGrid = this["export"];
                if (e.itemName == "Excel Export") {
                    this.exportGrid(window.baseurl + 'api/grid/ExcelExport')
                    e.cancel = true;
                } else if (e.itemName == "Word Export") {
                    this.exportGrid(window.baseurl + 'api/grid/WordExport')
                    e.cancel = true;
                } else if (e.itemName == "PDF Export") {
                    this.exportGrid(window.baseurl + 'api/grid/PdfExport')
                    e.cancel = true;
                    document.getElementById('container')
                }
            },
        });
    });

    //Test Base
    var teste = [
        {Name: "bruno", City: "Brasilia"},
        {Name: "bruno1", City: "Riacho Fundo l"},
        {Name: "bruno2", City: "Guára"},
        {Name: "bruno3", City: "Cruzeiro"}
    ];
}
render() {
    return (
            <div className="content-container-fluid">
                <div className="row">
                    <div className="cols-mple-area">
                        { this.menuGrid()}
                        <div id="Grid"></div>
                    </div>
                </div>
            </div>
            );
   }
}

export default GridSeries;

Answer 1

问题的原因是您已从节点包加载脚本，并且默认情况下我们无法从react组件中的节点包加载require脚本。因此，我们建议您使用webpack或browserify技术来满足您的要求。请参阅以下知识库文档。

https://www.syncfusion.com/kb/7547/how-to-bundle-syncfusion-reactjs-components-using-webpack-and-browserify

使用react从网格syncfusion导入组件ej时出现问题

1 个答案: