我多次尝试解决此问题而反复遇到此错误。在这里,我给出了示例代码。
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,它总是抛出相同的错误。如何解决此问题?
new Grid
在您的代码中到底创建了什么。实际上,您只是想将其导出为React组件,而仅仅是基于现有DOM元素创建一个网格。由于您要在导出中调用new Grid
,因此要导出实例。它会在触发您的App组件的render函数之前尝试创建Grid,这意味着它没有有效的目标绑定。尝试改为导出工厂函数,如下所示:
Example1.js