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

Question

我对 jsgrid lib 有疑问。我尝试将它加载到 React 项目中。我将库包含到项目中，就像在 npmjs 的说明中一样。

我的代码看起来：
index.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

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>
    );
    }
}

还有一些错误：

我在这上面浪费了一些时间，是否有任何说明如何将 jquery 这样的项目包含到 React 中？或者也许有人遇到过这样的问题并且知道如何解决它。

Answer 1

根本不要使用任何前缀，只需 $("#jsGrid").jsGrid(...

并导入 jquery

import $ from 'jquery';

另外，阅读这篇文章

Answer 2

您需要从 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 库？

How can I load and use jsgrid lib in React?

javascript

reactjs

jsgrid