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

我正在使用react，我想在我的一个组件中渲染一个syncfusion网格。但是，我对网格的一个组件有问题。找不到网格组件ej。我尝试过多种方式导入，但没有成功。有人遇到过这个问题并找到了解决方案吗

示例代码：

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;

import React，{Component}来自“React”；
从“jquery”导入$；
//此导入未找到渲染网格所需的组件（ej）
从“syncfusion javascript”导入{ej}；
//index.html文件中有脚本可根据安装网格
Syncfusion文档
类GridSeries扩展组件{
构造函数（）{
超级（）；
this.menuGrid=this.menuGrid.bind（this）；
}
//函数负责挂载网格，它在我的渲染方法中被调用
menuGrid（）{
$（函数（）{
$（“#网格”）.ejGrid({
数据来源：teste，
允许年龄：对，
允许运动：是的，
AllowGroup:true，
允许过滤：对，
是的，
allowMultiSorting:true，
过滤器设置：{filterType:“excel”}，
工具栏设置：{showToolbar:true，toolbarItems:[ej.Grid.toolbarItems.ExcelExport，ej.Grid.toolbarItems.WordExport，ej.Grid.toolbarItems.PdfExport]}，
栏目：[
{键入：“复选框”，宽度：50}，
{字段：“订单ID”，标题文本：“订单ID”，宽度：75，textAlign:ej.textAlign.Right}，
{字段：“客户ID”，标题文本：“客户ID”，宽度：80}，
{字段：“EmployeeID”，标题文本：“EmployeeID”，宽度：75，textAlign:ej.textAlign.Right}，
{字段：“运费”，宽度：75，格式：{0:C}，textAlign:ej.textAlign.Right}，
{字段：“订单日期”，标题文本：“订单日期”，宽度：80，格式：“{0:MM/dd/yyyy}”，textAlign:ej.textAlign.Right}，
{字段：“船舶城市”，标题文本：“船舶城市”，宽度：110}
],
工具栏单击：功能（e）{
this.exportGrid=此[“导出”]；
如果（如itemName==“Excel导出”）{
this.exportGrid（window.baseurl+'api/grid/ExcelExport'）
e、 取消=真；
}else if（e.itemName==“Word导出”）{
this.exportGrid（window.baseurl+'api/grid/WordExport'）
e、 取消=真；
}else if（e.itemName==“PDF导出”）{
this.exportGrid（window.baseurl+'api/grid/PdfExport'）
e、 取消=真；
document.getElementById（'容器'）
}
},
});
});
//试验基地
测试变量=[
{名称：“布鲁诺”，城市：“巴西利亚”}，
{名称：“bruno1”，城市：“Riacho Fundo l”}，
{名称：“bruno2”，城市：“Guára”}，
{名称：“布鲁诺”，城市：“克鲁塞罗”}
];
}
render（）{
返回(
{this.menuGrid（）}
);
}
}
导出默认网格序列；

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

---

请尝试用英语提问，或在“我正在投票”中以非主题方式结束此问题，因为它不是用英语的-这是一个纯英语的网站-请遵守网站规则！Post code用法示例。@Chase DeAnda codigo postadDid您在这里完成了安装过程吗？我使用的架构是react脚本，它与link建议的脚本不同。我不使用网页包配置文件。网页包设置是隐含的。我使用的体系结构将使这一前提变得简单：使用SyncFusion的React文档相当混乱。我仍在处理与你描述的相同的问题。我还没有找到解决办法。