複雑なWebプロジェクトでは、多くの場合、サードパーティのウィジェットを使用する必要があります。フレームワークを使用していて、ウィジェットが純粋なJavaScriptでのみ利用可能である場合はどうでしょうか。プロジェクトでJavaScriptウィジェットを使用するには、フレームワーク固有のラッパーを作成するのが最善の方法です。データグリッドに情報を表示するためのJavaScriptウィジェットです。これにより、情報を動的に並べ替え、フィルタリング、および選択できます。Reactラッパーも提供します。サードパーティのウィジェットをReactコンポーネントにラップする方法を学ぶための基礎として。ReactPropsとウィジェットの構成オプションの間のマッピングを設定します。Reactコンポーネントを介してウィジェットのAPIを公開します。前提条件この記事をフォローするには、次のものが必要です。Reactにある程度精通している。React.jsシリーズのコーディング方法をご覧ください。ステップ1—JavaScriptウィジェットを理解する一般に、ほとんどのJavaScriptウィジェットには次のものがあります。適切な説明は、公式ドキュメントにあります。データグリッドは次のことを定義します。グリッドプロパティは、行アニメーションなどのグリッドの機能を有効にします。グリッドAPIは、実行時にグリッドと対話します(たとえば、選択したすべての行を取得します)グリッドイベント行の並べ替えや行の選択など、グリッドで特定のイベントが発生したときにグリッドから発行されますグリッドコールバックは、必要なときにアプリケーションからグリッドに情報を提供するために使用されます(たとえば、メニューが表示されるたびにコールバックが呼び出され、アプリケーションがメニューをカスタマイズできるようになります)グリッドオプションの使用法を示す非常に基本的な純粋なJavaScript構成を次に示します。}}まず、JavaScriptデータグリッドは次のように初期化されます。JavaScriptデータグリッドを制御するために使用できます。Reactコンポーネントとして使用されるため、データグリッドを直接インスタンス化することはありません。それがラッパーコンポーネントの仕事です。コンポーネントインスタンスを介して発生します。グリッドによってアタッチされたAPIオブジェクトに直接アクセスすることはできません。コンポーネントのインスタンスを介してアクセスします。ステップ2—ラッパーコンポーネントが何をすべきかを決定する構成オプションとコールバックをグリッドに直接渡すことはありません。Reactラッパーコンポーネントは、ReactPropsを介してオプションとコールバックを受け取ります。Reactdatagridでも使用できる必要があります。Reactコンポーネントの小道具から利用できるはずです。そのプロパティを介して次の例は、ReactPropsを使用してテンプレートでReactデータグリッドを構成する方法を示しています。onGridReady={this.onGridReady}/>要件を理解したので、次の場所でどのように実装したかを見てみましょう。ag-Grid.ステップ3—ReactWrapperを実装するまず、テンプレートでReactデータグリッドを表すReactコンポーネントAgGridReactを定義する必要があります。データグリッドのコンテナとして機能する要素。ag-Grid、すべてのオプションも収集する必要があります。プロパティとイベントは、ReactPropsとして提供されます。プロパティは、すべてのデータグリッドオプションを格納するために使用されます。利用可能になり次第、Reactプロップからすべての構成オプションをコピーする必要があります。そのために、copyAttributesToGridOptions関数を実装しました。これは、あるオブジェクトから別のオブジェクトにプロパティをコピーするユーティリティ関数です。すべての小道具が更新された後のライフサイクルメソッド。これは、グリッドをインスタンス化するフックでもあります。}}上記のように、列として渡された子が存在するかどうかも確認し、列定義として構成オプションに追加します。AgGridColumn.mapChildColumnDefs(this.props);}ステップ4—グリッドプロパティの更新を同期するグリッドが初期化されたら、データグリッドの構成オプションを更新するためにReactPropsへの変更を追跡する必要があります。それを行うためのAPIを実装します。ヘッダーの高さを更新するメソッド。変更についてコンポーネントに通知するライフサイクルメソッド。ここに更新ロジックを配置します。ag-Gridの構成プロパティとコールバックを確認し、それらのいずれかが変更されているかどうかを確認します。この方法は2つのことを行います。次に、APIメソッドを呼び出して、変更についてグリッドに通知します。}}ステップ5—APIを公開する実行時のReactグリッドとの対話は、グリッドAPIを介して行われます。列のサイズを調整したり、新しいデータソースを設定したり、選択したすべての行のリストを取得したりすることができます。グリッドオプションオブジェクトへのオブジェクト。このオブジェクトを公開するには、コンポーネントインスタンスに割り当てます。結論このチュートリアルでは、バニラJavaScriptライブラリをReactフレームワーク内で機能するように適合させる方法を学びました。このトピックの詳細については、「他のライブラリとの統合」に関する公式のReactドキュメントを参照してください。Joseモバイルバージョンに。