問題タブ [react-virtualized]

AutoSizer を追加しようとしていますが、高さと幅が 0px のままです。

次のように AutoSizer を追加します。

結果のhtml：

ログは私に与えます：

幅: 400 高さ: 200

ブラウザーで 0px ボックスの html を編集してボックスをスクロールすると、状態の変化によって高さが増加すると想定されますが、何も起こりません。新しい高さの値がコンソールに記録されている場合でも、手動で変更されたサイズのままです。

Gridコンポーネントを使用しておりreact-virulized、列セルと行レベルでクリック イベントを処理する必要があります。cellRenderer メソッドによって返された に onClick を追加しようとしましたdivが、機能していないようです。誰かがこれを機能させましたか？下記参照：

ありがとう！

React Virtualized Selectを使用して、選択ドロップダウンに約 100 万件のレコードを表示したいと考えていました。フラスコとangularjsに基づいてプロジェクトを作成しました。angularjs を介してそのようなドロップダウンのリソースを見つけることができなかったため、この選択ドロップダウンを取得するために、react.js と angular.js を使用することにしました。

私の質問に来て、私が今まで試したコードの下を見つけてください。私は nodeJS を使用していないため、これらのドロップダウンで重要な役割を果たす「require」または「include」を使用することはできませんが、幸いにも「react-virtualized-select」用の UMD JavaScript ファイルが提供されていたので、これらのスクリプトを最後に含めました。 HTML本体の、しかし、コードを実行すると、コンソールにエラーが表示されます

embedded:20 Uncaught ReferenceError: VirtualizedSelect が定義されていません

適切な方法で反応を実装しているか、またはUMDファイルについて間違っていることを誰かが教えてくれますか? 前もって感謝します。

更新: 問題を強調する JS Fiddle を作成しました。また、SO からのコメントに基づいてコードにいくつかの変更を加えました。

JSFiddle Demo

react-virtualizedを使用してリストの動的な高さを実現する方法については、少しわかりません。

次のようなコンポーネントがあります。

リストコンポーネントで使用できると書かれているドキュメントに従ってCellMeasurerの使用を検討しましたが、この例が実際にどのように機能するかわかりません...

また、デモ コードでそれがどのように達成されたかを調べようとしましたが、行き止まりにもなりました。

各アイテムの高さを動的に取得するために DOM を測定する方法について、誰か助けてください。

「列」コンポーネントを継承/サブクラス化すると、スローされますWarning: Failed prop type: Table only accepts children of type Column

これが私がサブクラス化した方法ですColumn

非常にうまく機能しますが、その警告を回避するにはどうすればよいですか?

VirtualScroll (List) コンポーネントをほぼ 1 日中チューニングしてきましたが、うまくいきません。

反応仮想化リストを使用してチャットメッセージを表示する Web ベースのチャットアプリケーションを構築しています。メッセージの内容と高さが異なる場合があるため、react-measureを使用してアイテムの高さを計算し、rowRenderer で recomputeRowHeights を発行します。

結果は悪く、スクロールを停止するたびに VirtuallScroll List がジャンプします。たとえば、ブラウザの半分までスクロールすると、メッセージの中央が表示されるはずですが、常にオフセットが突然シフトします。録画したビデオをご覧ください: https://drive.google.com/file/d/0B_W64UoqloIkcm9oQ08xS09Zc1k/view?usp=sharing

List と Autosizer コンポーネントのみを使用するため、必要な css ファイルのみをプロジェクトに適用します。

```

render メソッドについては、rowRender 内に多数の flex コンポーネントをネストしました。コードは次のとおりです。

```

```

Flexbox がスクロール イベントをインターセプトしている可能性があるというドキュメントをいくつか読みましたが、ネストされたコンポーネントにoverflow-y: hiddenを追加しても、問題が消えることはありませんでした。List コンポーネントでこの間違ったスクロール動作を見たことがありますか?

どんな提案でも大歓迎です。

browserify (commonjs) を使用して、react-virtualized のサイズを最小化するにはどうすればよいですか? コレクションやテーブルなど、私が使用していない他のクラスが含まれているようです。import {foo, bar}...各クラスを個別に指定するだけでなく、標準の構文を使用してみましたimport {WindowScroller} from 'react-virtualized/dist/commonjs/WindowScroller'。それでも、RV はまだ ~90k を使用しているようです。

ありがとう！