1

フロントエンドの目的で 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 />呼び出されたときに上記のエラーが発生する要素で呼び出しています。

index.html に他のコンポーネントとして定義してロードしているのに、fixed-data-table.min.js を取り込まないように見えますか?

編集:関数の直前にインポートしようとしました...結果は次のとおりです: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)
4

1 に答える 1

2

コンポーネントで試してから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

于 2016-12-22T14:06:09.760 に答える