反応データグリッド：createElementタイプがtypescript＆webpackの外部で無効です

Question

皆さん、私は反応データグリッドと反応データグリッドアドオンライブラリの両方をwebpackの外部として設定しようとしています。私の資産バンドルに含まれることはありません。私はwebpackの外観の部分にすべてを移動しようとする前に、すべての作業をしていた。 いくつかのスタックトレースで次のエラーメッセージが見つかりましたが、動作させることができませんでした。おそらく、私のユースケースは少し違っていて、問題はどこかにあるのだろうか？

React.createElement：タイプが無効です - 組み込みコンポーネントのクラスまたはクラス/関数（複合コンポーネントの場合）がgot：オブジェクトであると予想されます。レンダリング方法がTableであることを確認します。私が持っている私のWebPACKのmodule.exportsはの見た目で

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

：

ため

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

そして最後に全体の論理私はpackage.jsonで、次のバージョンを使用

テーブルをレンダリングしようとしています。私は一番上にある輸入品を試してみましたが、役に立たなかったのですか？（何か私が正しくしていないのでしょうか？）表は、フィルター可能な&の反応データグリッドhttp://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-gridが）。しかし、typescriptです構造にそれを変更しなければならなかった。

/** @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文が間違っているとき、私は通常、このエラーを取得します。あなたは、「反応・データ・グリッド・アドオン」からRRGAとしてこのインポート*を試すことができます;およびwhereeverツールバーを使用していて、データがRRGA.ToolbarとRRGA.Dataを使用してもJSXタグに

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

とあなたのレンダリングfunctioに。あなたがツールバーとデータを使用する他の場所

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} 
     />); 
}