Question

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

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查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"
}

最后，表格的整个逻辑我试图渲染。我试过玩顶部的进口，但无济于事:(有什么东西我做得不对吗？表格是我用过的可过滤和可排序表格示例的例子-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"),
);

Answer 1

当我的import语句出错时，我通常会收到此错误。你能从“react-data-grid-addons”中尝试这个导入*作为RRGA吗？无论您使用工具栏还是数据，都使用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}
        />);
}

react-data-grid：createElement类型对typescript＆amp; webpack externals

1 个答案: