反应：lickGrid需要有效的容器，#myGrid在DOM中不存在

Question

我多次尝试解决此问题而反复遇到此错误。在这里，我给出了示例代码。

index.js，

const app = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    </Provider>

);
ReactDOM.render(app, document.getElementById("root"));

App.js，

import React, { Component } from 'react';

import SlickGrid1 from "./containers/Grids/SlickGrid/GridExamples/Example1";

class App extends Component {
  render () {


    return (
      <div>
          <div id="myGrid"></div>
          <SlickGrid1 />
      </div>
    );
  }
}

export default App;

Example1.js，

import {Grid, Data} from 'slickgrid-es6';
import data from "../example-data";
const columns = [
  { id: "title", name: "Title", field: "title", maxWidth: 100, minWidth: 80 },
  { id: "duration", name: "Duration", field: "duration", resizable: false },
  { id: "%", name: "% Complete", field: "percentComplete" },
  { id: "start", name: "Start", field: "start" },
  { id: "finish", name: "Finish", field: "finish" },
  { id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
];

const options = {
  enableCellNavigation: true,
  enableColumnReorder: true,
  forceFitColumns: !true,
  frozenColumn: 0,
  frozenRow: 1
};

const dataView = new Data.DataView();
dataView.setItems([ ...data ]); // some data


export default new Grid("#myGrid", dataView, columns, options);

尽管，我在'#myGrid'组件渲染之前定义了<SlickGrid1 /> div，它总是抛出相同的错误。如何解决此问题？

Answer 1

我认为您误解了new Grid在您的代码中究竟创建了什么。实际上，您只是想将其导出为React组件，而仅仅是基于现有DOM元素创建一个网格。由于要在导出中调用new Grid，因此要导出实例，它将在触发App组件的render函数之前尝试创建Grid，这意味着没有有效的目标可绑定到该Grid。尝试像这样先导出工厂函数：

import {Grid, Data} from 'slickgrid-es6';
import data from "../example-data";
const columns = [
  { id: "title", name: "Title", field: "title", maxWidth: 100, minWidth: 80 },
  { id: "duration", name: "Duration", field: "duration", resizable: false },
  { id: "%", name: "% Complete", field: "percentComplete" },
  { id: "start", name: "Start", field: "start" },
  { id: "finish", name: "Finish", field: "finish" },
  { id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
];

const options = {
  enableCellNavigation: true,
  enableColumnReorder: true,
  forceFitColumns: !true,
  frozenColumn: 0,
  frozenRow: 1
};

const dataView = new Data.DataView();
dataView.setItems([ ...data ]); // some data

export default () => new Grid("#myGrid", dataView, columns, options);

然后在App组件的componentDidMount挂钩中调用此工厂函数：
import React, { Component } from 'react';

import SlickGrid1 from "./containers/Grids/SlickGrid/GridExamples/Example1";

class App extends Component {
  componentDidMount() {
    SlickGrid1();
  }
  render () {


    return (
      <div>
          <div id="myGrid"></div>
      </div>
    );
  }
}

export default App;