私は固定データ テーブルを使用しており、行のクリックで行を表示/非表示にしたいと考えています。反応固定データ テーブルの表示/非表示またはサブ テーブルに関連するものは見つかりませんでした。これを達成する方法、またはこれを達成するのに役立つ他のテーブルコンポーネントはありますか?

fixed-data-tableとその兄弟のアドオンに取り組んでいますが、Mocha/Chai セットアップを使用してテストをセットアップするのに苦労しています。私が得るエラーは次のとおりです。

私が見つけることができたすべてのチュートリアルは、簡単なコンポーネントのテストを処理する方法を示しています。エラーは、ノードが複雑なコンポーネントであることが原因であると思います。

私の質問:より複雑なコンポーネントを作成するにはどうすればよいですか? 特に、次の点について助けてください。

1. そのセルの値を含むノードを見つける
2. セルがどのように実装されているかをテストするときは、無知のままにしdivてください。td
3. 行 1 の要素/セルが、行 2 にあるはずの要素の前または後に表示されるかどうかを確認します (並べ替えを検証するため)。

バックグラウンド

コア テストのセットアップ:

データ スタブ:

実際のテスト:

アップデート

提案されたように酵素に変更されました：

自動生成された ID マーカーを に追加し、Textcellを使用して検索しようとしまし.find(`#${i}_name`)たが、オブジェクトが見つかりません。を使用してラップされた要素の出力を確認しましたがnode.html()、適切な ID を持つセルが含まれています。

私はこの ReactJS チュートリアルに従おうとしています:

パート 1 : http://4dev.tech/2015/12/reactjs-datatable-with-sort-filter-and-pagination-example-part-1/

パート 2 : http://4dev.tech/2016/03/tutorial-sorting-and-filtering-a-reactjs-datatable/

パート 1 は無事に終了しましたが、パート 2 を完了するには助けが必要です。

これはパート2の私のコードです:

データテーブルは表示されていますが、行のフィルタリングに使用される入力フィールドは表示されていません。

ブラウザー コンソールには、いくつかの警告を除いてエラーは表示されません。

何が問題なのかわかりません。御時間ありがとうございます。

私は FixedDataTable ( https://facebook.github.io/fixed-data-table/ ) を使用しており、列ヘッダーが正しく設定されていることを主張したいだけです。これが私のコンポーネント定義です：

私のテストは次のとおりです。

テストは次のエラーで失敗します。

‣ AssertionError: { Object ($$typeof, type, ...) } が Context で { Object ($$typeof, type, ...) } と等しいと予想されます。(ベース/テスト/コンポーネント/test_table_test.jsx:82:83)

ヘッダーが希望する値に設定されていることをテストするにはどうすればよいですか? proc に対してテストするマッチャーを作成するにはどうすればよいですか?

エンザイム、リアクト、モカ、チャイを使っています。

フロントエンドの目的で React をブートストラップ テンプレートと一緒に使用しています。fixed-data-tableパネルで使用するつもりです。タグで関数を呼び出すと、ブラウザーで次のエラーが発生します。

fixed-data-table.js は私の index.html にあります

.css ファイルも追加しました。

テーブル作成用の反応クラスは次のとおりです。

<TestTable />呼び出されたときに上記のエラーが発生する要素で呼び出しています。

index.html に他のコンポーネントとして定義してロードしているのに、fixed-data-table.min.js を取り込まないように見えますか?

編集:関数の直前にインポートしようとしました...結果は次のとおりです:import {Table, Column, Cell} from "./script/lib/fixed-data-table.min.js";

fixed-data-table の例を使用して、webpack にバンドルしようとしています。

私はbabel-loaderを使用していますが、それ以外の場合、コードは問題なくバンドルされます。

Runningwebpackは、私の知る限り ES6 構文 (ES5 ではない) の一部であるエラーを指しています ... 次の...ような :

render() { var {sortDir, children, ...props} = this.props;

...props具体的に。

これが私のwebpack構成です：

私はes2015を使用しており、プリセットとして反応し、babel-loaderでロードしています。ES6 構文を理解して処理するはずなのに、なぜ構文エラーをスローするのでしょうか?

これが私の Package.json です。おそらくいくつかのバージョンをアップグレードする必要がありますか?