我将 React 与 Bootstrap 模板一起用于前端目的。我打算使用 fixed-data-table在面板中。在标记中调用函数会导致浏览器出现以下错误:
Uncaught ReferenceError: Table is not defined
at t.render (eval at n.run (babel.5.8.38.browser.min.js:3), <anonymous>:1059:13)
at p._renderValidatedComponentWithoutOwnerOrContext (react.min.js:13)
at p._renderValidatedComponent (react.min.js:13)
at performInitialMount (react.min.js:13)
at p.mountComponent (react.min.js:13)
at Object.mountComponent (react.min.js:15)
at h.mountChildren (react.min.js:14)
at h._createInitialChildren (react.min.js:13)
at h.mountComponent (react.min.js:13)
at Object.mountComponent (react.min.js:15)
fixed-data-table.js 在我的 index.html 中为
<script src="script/lib/fixed-data-table.min.js"></script>
虽然我也为它添加了 .css 文件。
这是创建表的 react 类:
var TestTable = React.createClass({
getInitialState: function () {
return {data : {
rows: [
{
"street": "Road",
"number": "33",
"postalCode": "5000",
"city": "Town 3",
"country": "Country1"
},
{
"street": "Road",
"number": "333",
"postalcode": "5000",
"city": "Town 1",
"country": "Country 2"
},
{
"street": "Road",
"number": "31",
"postalCode": "5500",
"city": "Town 2",
"country": "Country 3"
}]
}};
},
render() {
return <Table
height={40 + ((this.state.data.rows.length + 1) * 30)}
width={1150}
rowsCount={this.state.data.rows.length}
rowHeight={30}
headerHeight={30}
rowGetter={function (rowIndex) {
return this.state.data.rows[rowIndex];
}.bind(this)}>
<Column dataKey="street" width={100} label="Address"/>
<Column dataKey="number" width={100} label="Number"/>
<Column dataKey="postalcode" width={100} label="Postal Code"/>
<Column dataKey="city" width={400} label="City"/>
<Column dataKey="country" width={50} label="Country"/>
</Table>;
},
});
我在元素中称它为 <TestTable />然后在调用时产生上述错误。
它似乎没有接受 fixed-data-table.min.js，即使它像其他组件一样定义并加载到 index.html 中？
编辑:我试图在函数之前直接导入...现在的结果是:import {Table, Column, Cell} from "./script/lib/fixed-data-table.min.js";
Uncaught ReferenceError: require is not defined
at eval (eval at n.run (babel.5.8.38.browser.min.js:3), <anonymous>:4:37)
at Function.n.run (babel.5.8.38.browser.min.js:3)
at l (babel.5.8.38.browser.min.js:3)
at babel.5.8.38.browser.min.js:3
at XMLHttpRequest.s.onreadystatechange (babel.5.8.38.browser.min.js:3)
最佳答案
您可以尝试通过 npm 包安装它，然后在您的组件中使用它。
安装运行命令
npm install -S fixed-data-table
然后导入它
import {Table, Column, Cell} from 'fixed-data-table';
这应该适合你
另外，正如文档所建议的，您应该添加默认样式表 dist/fixed-data-table.css
关于javascript - react 固定数据表 : Uncaught ReferenceError: Table is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41284155/