1

大家好，我正在尝试将 react-data-grid 和 react-data-grid-addons 库设置为 webpack 中的外部库，因此它们不会包含在我的资产捆绑中。在我尝试将其全部移动到 webpack 的外部部分之前，我已经完成了所有工作。我在一些堆栈跟踪中发现了以下错误消息，但无法使其正常工作。也许我的用例有点不同，问题出在其他地方？这是我收到的信息：

React.createElement: type is invalid - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。检查Table.

我在 package.json 中使用以下版本：

"dependencies": {
    "react": "15.4.2",
    "react-data-grid": "2.0.60",
    "react-data-grid-addons": "2.0.60",
    "react-dom": "15.4.2"
  },

在我的 webpack module.exports 的外部，我有：

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "react-data-grid": "ReactDataGrid",
  "react-data-grid-addons": "ReactDataGridPlugins"
}

最后是我要渲染的表格的整个逻辑。我试过在顶部使用导入，但无济于事:(有什么我做错了吗？该表是我使用的示例，来自 react-data-grid 给出的可过滤和可排序表示例（http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid）。但是必须将其更改为打字稿结构。

/** @module Global *//***/

import * as React from "react";
import * as ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import * as ReactDOM from "react-dom";

const Selectors = Data.Selectors;

/**
 * Row interface
 */
interface Row {
    id: number;
    title: string;
    count: number;
}

/**
 * Column interface
 */
interface Column {
    key: keyof Row;
    name: string;
    filterable?: boolean;
    sortable?: boolean;
}

/**
 * State interface
 */
interface State {
    rows: Row[] | null;
    filters: any;
    sortColumn: string | null;
    sortDirection: string | null;
}

/**
 * Table component
 */
class Table extends React.Component<{}, State> {
    private columns: Column[];
    private rows: Row[];

    public state: State = {
        rows: null,
        filters: {},
        sortColumn: null,
        sortDirection: null,
    };

    /**
     * Table class constructor
     * @param props
     * @param context
     */
    constructor(props: any, context: any) {
        super(props, context);
        this.columns = [
            { key: "id", name: "ID", filterable: true, sortable: true },
            { key: "title", name: "Title", filterable: true, sortable: true },
            { key: "count", name: "Count", filterable: true, sortable: true },
        ];
        this.rows = this.createRows();

        this.state.rows = this.rows;

        this.handleGridSort = this.handleGridSort.bind(this);
        this.handleFilterChange = this.handleFilterChange.bind(this);
        this.onClearFilters = this.onClearFilters.bind(this);
    }

    /**
     * Create the table rows
     * @returns {Row[]}
     */
    public createRows(): Row[]  {
        const rows = [];
        for (let i = 1; i < 1000; i++) {
            rows.push({
                id: i,
                title: "Title " + i,
                count: i * 1000,
            });
        }
        return rows;
    }

    /**
     * Get the table rows as an array of Row objects
     * @returns {Row[]}
     */
    public getRows(): Row[] {
        return Selectors.getRows(this.state) as Row[];
    }

    /**
     * Get the amount of rows
     * @returns {number}
     */
    public getSize(): number {
        return this.getRows().length;
    }

    /**
     * Get a specific row
     * @param {number} i
     * @returns {Row}
     */
    public rowGetter(i: number): Row {
        const rows = this.getRows();
        return rows[i];
    }

    /**
     * Handle the filter change
     * @param filter
     */
    public handleFilterChange(filter: any): void {
        const newFilters = {...this.state.filters};
        if (filter.filterTerm) {
            newFilters[filter.column.key] = filter;
        } else {
            delete newFilters[filter.column.key];
        }

        this.setState({ filters: newFilters });
    }

    /**
     * Handle the table sorting
     * @param {string} sortColumn
     * @param {string} sortDirection
     */
    public handleGridSort(sortColumn: string, sortDirection: string): void {
        this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });
    }

    /**
     * Handles the clearing of the filters
     */
    public onClearFilters(): void {
        this.setState({ filters: {} });
    }

    /**
     * Render table
     * @returns {any}
     */
    public render(): any {
        // console.log(this);
        return  (
            <ReactDataGrid
                columns={this.columns}
                rowGetter={this.rowGetter.bind(this)}
                rowsCount={this.getSize()}
                minHeight={500}
                toolbar={<Toolbar enableFilter={true} />}
                enableCellSelect={true}
                onGridSort={this.handleGridSort}
                onAddFilter={this.handleFilterChange}
                onClearFilters={this.onClearFilters}
            />);
    }
}

ReactDOM.render(
    <Table />,
    document.getElementById("table"),
);
4

1 回答 1

0

当我的导入语句错误时，我通常会收到此错误。你能试试这个 import * as RRGA from "react-data-grid-addons" 吗？无论您在哪里使用工具栏和数据，都使用 RRGA.Toolbar 和 RRGA.Data。即使在 jsx 标签中。

 import * as RRGA from "react-data-grid-addons";

在你的渲染函数和其他你使用工具栏和数据的地方

public render(): any {
    // console.log(this);
    return  (
        <ReactDataGrid
            columns={this.columns}
            rowGetter={this.rowGetter.bind(this)}
            rowsCount={this.getSize()}
            minHeight={500}
            toolbar={<RRGA.Toolbar enableFilter={true} />}
            enableCellSelect={true}
            onGridSort={this.handleGridSort}
            onAddFilter={this.handleFilterChange}
            onClearFilters={this.onClearFilters}
        />);
}
于 2017-11-16T11:38:41.213 回答