問題タブ [react-grid-layout]

これは、react-grid-layoutドキュメントのコードです。

これで React コンポーネントのdiv要素を抽出したいと思います。だから私はこのコードを追加しました：

したがって、最初の部分は次のようになります。

問題は、それが機能していないことです。div要素は存在しますが、クラス名の変換は行われません。

何か不足していますか？

過去数時間、反応コンポーネントをドラッグおよびサイズ変更可能にする方法を探していました。react drag and dropでドラッグ可能にする方法を見つけましたが 、サイズを変更可能にする簡単な方法が見つかりません:/コンポーネントをドラッグ可能およびサイズ変更可能にする方法について経験がある人はいますか?

ヘルプやポインタをいただければ幸いです。

反応に入ろうとしていて、ちょっとした障害に遭遇したときに反応グリッドレイアウトを見ていました。ここの例は基本的にそのまま貼り付けましたが、何らかの理由で要素をドラッグするとくっつきません。コンソールに表示されるエラーは次のとおりです。

私が見逃しているのは単純なことだと確信していますが、これは私の最初の React プロジェクトであり、いくつかのガイダンスをいただければ幸いです。

私のコードは以下に含まれています：

React では、https://github.com/STRML/react-grid-layoutを使用して基本的なグリッドを作成しようとしています。

2 つの長方形を作成し、次のようなレイアウトにしました。

ただし、長方形の代わりに、これが表示されます。

この失敗の原因について何か考えはありますか?

アイテムのレイアウトをプログラムでw変更する方法はありますか? h使用例は、アイテムのヘッダーを残すのに十分な高さを一定の高さに縮小する「折りたたみ」ボタンを使用することです。これを行うために、私の最初のアイデアはlayouts、コンポーネントの状態を維持し、折りたたまれたアイテムの高さを別の一定の高さに手動で変更することでした。

ただし、ライブラリはlayout初期レンダリング後の変更を無視するようです。これは事実ですか、それとも私の側のバグですか? それが通常の動作である場合、プログラムで高さを変更する別の方法はありますか?

を実装するスタンドアロン コンポーネントを次に示しreact-grid-layoutます。それらを「折りたたむ」ための onClick ハンドラーを持つのは、2 つの「ウィジェット」です。状態を設定することで、再レンダリングがトリガーされ、折りたたまれたアイテムの高さが小さくなるようにレイアウトが再計算されます。コンソール ログ ステートメントは、レンダリングされたコンポーネントが正しい新しいレイアウトを持っていることを示していますが、画面には反映されていないため、高さへの別の参照があると思われます。

jsFiddle の例

Meteor と ReactJS を使用してアプリケーションを開発しています。react-grid-layoutコンポーネントを使用してアイテムのグリッドを作成しています。

問題は、各要素の位置を手動で指定する必要があることです。私のアプリケーションでは、Meteor コレクションに基づいてグリッド アイテムを生成していますが、コレクション内のアイテムの数がわからない場合があります。

例

x上記の例では、グリッドには行ごとに 4 列が必要yですが、testCollectionアイテム 1 ～ 4 が行 1 に、5 ～ 8 が行 2 に、9 ～ 10 が行 3 に、コレクション内のアイテムの数にかかわらず、同様です。

どうもありがとうございました。

react-grid-layout*.d.tsのファイルを作成しようとしています。そのindex.jsファイルが示すように、関数をエクスポートします -呼び出されたのサブクラス:React.ComponentReactGridLayout

必須:

また、名前空間に分割された他のものもエクスポートします。

したがって、単一のエクスポートと複数のエクスポートを行います。

Typescript サイトとGitHub のこの宣言ファイルで説明されているモジュール内の単一の複合オブジェクトアプローチを試しましたが、あまり成功しませんでした。

アップデート

今のところ他のものを無視すると、私の定義はReactGridLayout次のようになります。

コンパイルします。ただし、次のような Javascript を生成します。

それがいつあるべきか：

を実装しようとしていますreact-grid-layout。_gridすべての例は、 div プロパティを介してグリッド アイテムの構成を渡します。

私の実装では：

エラーが発生します：

私はReactにかなり慣れていません。私は何を間違っていますか？

私が使用する関連npmパッケージのバージョン: