反応データテーブル未定義のツールバー

Question

ここで反応データテーブルを使用しようとしています。発狂。

https://github.com/adazzle/react-data-gridの手順に従い、http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-gridのコードサンプルを使用した後、次の問題が発生しています。

私は私のファイルに

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactDataGrid from 'react-data-grid'; 
import ReactDataGridPlugins from 'react-data-grid/addons'; 

var Toolbar = ReactDataGridPlugins.Toolbar; 
var Selectors = ReactDataGridPlugins.Data.Selectors; 

これを使用する場合、私は未定義の「プロパティを読み取ることができません 『ツールバー』を得る。

私は

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactDataGrid from 'react-data-grid'; 
import Toolbar from 'react-data-grid/addons'; 
import Selectors from 'react-data-grid/addons'; 

をしようとすると、私は次のエラーを取得します：

React.createElement：typeは、null、未定義、ブール値、または数値であってはなりません。文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）です。レンダリング方法がHostProviderListであることを確認してください。

そして、私は

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactDataGrid from 'react-data-grid'; 
import {Toolbar} from 'react-data-grid/addons'; 
import {Selectors} from 'react-data-grid/addons'; 

をしようとした場合、私は、このエラーに

警告を取得：不明な小道具onGridSort、columns、rowGetter、rowsCount、minHeight、onRowUpdated、toolbar、onAddFilter、minColumnWidth、columnEquality、enableCellSelect、rowHeightを、enableRowSelect,rowKey,rowScrollTimeout,cellNavigationMode、headerRows、columnMetrics、cellMetaData、selectedRows、rowSelection、expandedRows、rowOffsetHeight、sortColumn、sortDirection、onSort、totalWidth、onViewportKeydown、onViewportKeyup、onViewportDragStart、onViewportDragEnd、タグにonViewportDoubleClick、onColumnResize。要素からこれらの小道具を取り除く。

ここで何をすべきかわかりません。私が基本的なデータ・グリッドをオンライン・サンプルのように行うだけでうまくいきます。しかし、私がaddons.jsxファイルで何かをしようとすると、それは失敗します。サイドノート で

はNMP

が動作しない反応し、データグリッド/アドオンをインストールします。 git repoは見つかりません。しかし、反応データグリッドをnpmインストールした後、dist/react-data-grid.ui-plugins.jsをインポートするaddons.jsxファイルがあることがわかります

Answer 1

正しい方法は

です

import { Toolbar, Data } from 'react-data-grid/addons'; 
const Selectors = Data.Selectors;