反应固定数据表：未捕获的ReferenceError：未定义表

Posted 2023-02-21

【中文标题】反应固定数据表：未捕获的ReferenceError：未定义表

【英文标题】：React fixed-data-table: Uncaught ReferenceError: Table is not defined

【发布时间】：2017-05-08 03:19:58

【问题描述】：

我将 React 与引导模板一起用于前端目的。我打算在面板中使用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 文件。

这是创建表的反应类：

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)

【参考方案1】：

您可以尝试install it via an npm package，然后在您的组件中使用它。

要安装运行命令

npm install -S fixed-data-table

然后像这样导入

import Table, Column, Cell from 'fixed-data-table';

这应该对你有用

同样按照文档的建议，您应该添加默认样式表 dist/fixed-data-table.css

【讨论】：

这是假设我通过 webpack 或类似工具捆绑它，对吧？

正确，我认为这种方法比导入 babel 和 react 脚本更好

不过，我对 webpack 不是很熟悉。正确使用似乎完全是一团糟。我不明白你为什么只用一个文件制作一个包——似乎你不能输入一大堆第三方库，然后将它用作一个包来调用函数。但也许我错了。

好吧，webpack 并不是一团糟，而且使用起来也不难，考虑到它可以让您轻松地缩小代码，并且支持热加载以进行开发。这里有几个很好的链接来设置 webpack twilio.com/blog/2015/08/…, codementor.io/tamizhvendan/tutorials/…