Как я могу загрузить и использовать jsgrid lib в React? - PullRequest
Новая
       19

Как я могу загрузить и использовать jsgrid lib в React?

0 голосов
/ 19 февраля 2020

У меня проблема с jsgrid lib . Я пытаюсь загрузить его в проект React. Я включил библиотеки для проекта, как в инструкциях на npmjs. enter image description here

Мой код выглядит так:
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>
    );
    }
}

Все еще есть некоторые ошибки:
enter image description here

Я потратил на это некоторое время, Есть ли какие-нибудь инструкции, как включить jquery проекты, подобные этому, в React? Или, может быть, кто-то сталкивался с такой проблемой и знает, как ее исправить.

Ответы [ 2 ]

1 голос
/ 19 февраля 2020

Вам необходимо удалить JSGRID из jQuery и создать 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} />;
  }
}
1 голос
/ 19 февраля 2020

вообще не используйте префикс, просто $("#jsGrid").jsGrid(...

и импортируйте jquery

import $ from 'jquery';

, также прочитайте это
Как использовать JQuery с ReactJS

...