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

我多次尝试解决这个问题，但都一再遇到这个错误。这里我给出了我的示例代码

index.js

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

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

---

尽管我在

组件渲染之前定义了

'#myGrid'

div，但它总是抛出相同的错误。如何解决此问题？

我认为您误解了新网格在代码中创建的确切内容。您试图将其导出为React组件，而实际上它只是基于现有DOM元素创建网格。由于您在导出中调用了新网格，因此您正在导出一个实例。它将尝试在触发应用程序组件的渲染功能之前创建网格，这意味着它没有可绑定的有效目标。请尝试导出工厂函数，如下所示：

示例1.js

然后在应用程序组件的

组件挂载
钩子中调用此工厂函数：

App.js

import React，{Component}来自'React'；
从“/containers/Grids/SlickGrid/GridExamples/Example1”导入SlickGrid1；
类应用程序扩展组件{
componentDidMount（）{
flickGrid1（）；
}
渲染（）{
返回(
);
}
}
导出默认应用程序；

见此（我省略了测试数据）。
它工作正常。但是在div中添加css是困难的。实际上，在示例程序中，他们在“html”文件中定义了div。但是我在JSX中使用div。在HTML中，它们定义为'div id=“myGrid”style=“宽度：100%；高度：500px；”class=“slickgrid容器”>'。我想在JSX中定义同样的内容。我做了如下更改，但我不知道如何在这里添加“slickgrid容器”类。
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;

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

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

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;