如何在 React 中加载和使用 jsgrid 库？

Question

I have problem with jsgrid lib .我对jsgrid lib有问题。 I try to load it to React project.我尝试将其加载到 React 项目。 I included libraries to project, like in instructions on npmjs.我在项目中包含了库，就像在 npmjs 上的说明一样。

My code loooks:我的代码看起来：
index.html索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  </body>
</html>

app.js应用程序.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as JSGRID from 'jsgrid'



export default class App extends React.Component {
  componentDidMount() {

    window.$("#jsGrid").JSGRID.jsGrid({
      width: "100%",
      height: "400px",

      filtering: true,
      editing: true,
      sorting: true,
      paging: true,


      fields: [
          { name: "Name", type: "text", width: 150 },
          { name: "Age", type: "number", width: 50 },
          { name: "Address", type: "text", width: 200 },
          { name: "Country", type: "select", items: 0, valueField: "Id", textField: "Name" },
          { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
          { type: "control" }
      ]
  });
  }


  render() {
    return (
      <div id="jsGrid">

      </div>
    );
    }
}

Still have some errors:还是有一些错误：

I wasted some time on it, Is any instructions how include jquery projects like this to React?我浪费了一些时间，是否有任何说明如何将这样的 jquery 项目包含到 React 中？ Or maybe somebody faced with problem like this and know how to fix it.或者也许有人面临这样的问题并知道如何解决它。

Answer 1

dont use any prefix at all, just $("#jsGrid").jsGrid(...根本不使用任何前缀，只需$("#jsGrid").jsGrid(...

and import jquery并导入 jquery

import $ from 'jquery';

also, read this另外，阅读这个
How to use JQuery with ReactJS 如何在 ReactJS 中使用 JQuery

Answer 2

You need to remove JSGRID from the jQuery and should create a ref to reference the node instead of querying it.您需要从 jQuery 中删除JSGRID ，并且应该创建一个ref来引用节点而不是查询它。

 // change to require require("jsgrid"); export default class App extends React.Component { constructor(props) { super(props); this.gridRef = React.createRef(); } componentDidMount() { // remove JSGRID and use a ref window.jQuery(this.gridRef.current).jsGrid({ width: "100%", height: "400px", filtering: true, editing: true, sorting: true, paging: true, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: 0, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control" } ] }); } render() { return <div id="jsGrid" ref={this.gridRef} />; } }

如何在 React 中加载和使用 jsgrid 库？

问题描述

2 个解决方案

解决方案1
1 2020-02-19 15:39:58

解决方案2
1 已采纳 2020-02-19 16:26:21

如何在 React 中加载和使用 jsgrid 库？

问题描述

2 个解决方案

解决方案1 1 2020-02-19 15:39:58

解决方案2 1 已采纳 2020-02-19 16:26:21

解决方案1
1 2020-02-19 15:39:58

解决方案2
1 已采纳 2020-02-19 16:26:21