response-data-grid: тип createElement недопустим с внешними наборами текстов и веб-пакетов

Question

Привет, ребята, я пытаюсь установить обе библиотеки response-data-grid и response-data-grid-addons как внешние в веб-пакете, чтобы они не включались в мой пакет ресурсов. У меня все работало, прежде чем я попытался переместить все это во внешнюю часть веб-пакета. Я нашел следующее сообщение об ошибке в нескольких трассировках стека, но не смог заставить его работать. Возможно, мой вариант использования немного отличается, и проблема кроется где-то еще? Это сообщение, которое я получаю:

React.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект. Проверьте метод визуализации 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"
  },

Во внешнем виде моего модуля pack.exports у меня есть:

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

И, наконец, вся логика для таблицы, которую я пытаюсь представить. Я попытался поиграть с импортом вверху, но безрезультатно:(Есть что-то, что я не правильно делаю? В таблице приведен пример, который я использовал из примера фильтруемой и сортируемой таблицы, предоставленной response-data-grid ( http://adazzle.github.io/react-data-grid/examples.html). Однако пришлось изменить его на структуру машинописного текста.

/** @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

Обычно я получаю эту ошибку, когда мои операторы импорта неверны. Можете ли вы попробовать этот импорт * как RRGA из "response-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}
        />);
}