如何在 React 中加載和使用 jsgrid 庫？

Question

我對jsgrid lib有問題。 我嘗試將其加載到 React 項目。 我在項目中包含了庫，就像在 npmjs 上的說明一樣。

我的代碼看起來：
索引.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>

應用程序.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';

另外，閱讀這個
如何在 ReactJS 中使用 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 庫？

問題描述

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