Probleme beim Importieren der Komponente ej von Grid Syncfusion mit der Reaktion

Question

Ich benutze die Reaktion und ich möchte in einer meiner Komponenten ein Syncfusion Grid rendern. Allerdings habe ich Probleme mit einer der Komponenten des Grids. Die Gitterkomponente ej wird nicht gefunden. Ich habe versucht, auf verschiedene Arten zu importieren, aber ich war nicht erfolgreich. Hat jemand dieses Problem gehabt und eine Lösung gefunden? Error Message

Beispielcode:

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

Die Ursache des Problems ist, dass Sie die Skripte aus Knoten Paket laden und wir können die benötigen Skripte vom Knoten Paket in der reagieren Komponente standardmäßig nicht geladen werden. Daher empfehlen wir Ihnen, entweder webpack oder browserify zu verwenden, um Ihre Anforderungen zu erfüllen. Bitte beachten Sie das folgende Knowledge-Base-Dokument.

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