問題タブ [react-dom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
942 参照

javascript - React: DOM ノードの選択フィールドから値を取得する

私は初心者のバックエンド開発者で、機能の修正を任されており、反応部分で立ち往生しています。選択コンポーネントから値を取得するための適切な構文が見つからないようです。それが私の全体的な問題です。私は他の多くの投稿と反応ドキュメントを見てきましたが、私が試しているものは何も機能していません。マークアップの例は次のとおりです (このビューには多くの選択フィールドがあります)。

次に、イベント ハンドラーは次のようになります。

console.log(field) の結果は次のとおりです。

そこからは続きますが、'value="NHDS"' は私が必要としている部分であり、私の人生でそこにたどり着く方法がわかりません。この質問を明確にするか改善できるかどうか教えてください。前もって感謝します。

0 投票する
1 に答える
11169 参照

reactjs - レンダリング前に反応するコンポーネントまたは画像のサイズを見つける

さまざまなサイズの画像のリストがあります。


レンダリングする前に高さの配列を取得したい。次に、scrollHeight に基づいてビューポートに表示される画像のみをレンダリングします。たとえば、React Infinteを使用する

反応コンポーネントの外でこれを簡単に行うことができます

ただしnew image()、DOM に依存するため、react では機能しません。

私の React コンポーネントのレンダリング メソッドは次のようになります。

画像の高さを取得するにはどうすればよいですか? ReactDOM を使用して一時的な div で画像をレンダリングする必要がありますか?

0 投票する
0 に答える
247 参照

javascript - React サーバー側のレンダリング - 無効なチェックサムの警告

私はNodeschoolのreactチュートリアル、というタイトルのモジュールをやっていますlearnyoureact

レッスン中Isomorphic(11 の 8)、次の警告が表示されます。

私の解決策はこれと同じで、この解決策からコピーして貼り付けようとしましが、それでも同じ警告が表示されます。問題を再現するには、上記のリポジトリからコードをコピーします。

それはどういう意味ですか?thisthisなど、これに関するいくつかの SO 投稿を見ましたが、解決策が私の問題/警告に関係しているとは思いません。React の初心者として、私は次に何をすべきか困惑しています。HTML ページは問題ないように見えますが、learnyoureactモジュールには別の HTML が生成されていると表示されており、Chrome の検査ツールでも確認できます。

問題はこの行に起因することがわかりました。

この問題/警告を修正するにはどうすればよいですか? ありがとうございました!

エラー トレースの図を次に示します。

ここに画像の説明を入力

これが私が今見ているものです。数時間後に立ち去って再実行した後、警告は不思議なことに消えましnode program.jsたが、端末ではまだ同じ誤った HTML が表示されます。何か案は?

ここに画像の説明を入力

0 投票する
1 に答える
210 参照

javascript - React 動的フォーム状態の処理

ダイナミックなフォルムをしています。フォームはユーザー入力に基づいて任意のパターンで成長し、フォームからのすべてのユーザー入力を React State としてキャプチャします。

フォームの送信時に、状態 (JSON) を YAML ファイルに変換します。この状態の JSON 構造には、複数のデータ構造が関与する深いツリーがあります。この深いツリーの要素を変更すると、フォームが更新されます。しかし、動的フォームが大きくなるにつれて、フォームの読み込み時間と反応時間が増加します。この複雑な状態操作をより速く処理する方法はありますか?

0 投票する
1 に答える
1374 参照

javascript - ランダムに生成された文字列を使用した React によるサーバー側レンダリング?

React/Redux アプリで初めてサーバー側のレンダリングを試みています。私が今抱えている問題は、初期状態でランダムに生成された文字列を作成し、それを小道具としてメインAppコンポーネントに渡す必要があることです。クライアントとサーバーに異なる文字列を生成しているため、これは明らかに問題を引き起こしています。この問題の発生を防ぐためにできることはありますか?

理解に役立つ基本構造:

App.js

そして私のレデューサー:

reducer.js

ご覧のとおりrandomStr、redux ストアから を取得してレンダリングしていますが、クライアントとサーバーでは異なります。どんな助けでも大歓迎です!

0 投票する
1 に答える
1701 参照

javascript - Webpack を使用して CDN から React を含めますが、ReactDOM は含めません

私の webpack ビルドでは、ReactDOM ではなくCDN から React をロードしたいと考えています。これは、非常に小さなファイルに対して追加のラウンドトリップが必要になるためです。

私の webpack 構成には、これらのファイルをビルドしないように、「externals」を宣言する次のコード ブロックがあります (代わりに CDN を含めます)。

webpack.config.js

問題は、ReactDOM が React に依存しているため、外部に React を含めるだけでも React がビルドされることです。

node_modules/react-dom/index.js

外部に追加'react-dom': 'ReactDOM'すると、両方がバンドルから効果的に削除されますが、ReactDOM CDN を含める必要はありません...

CDN から React をロードするように webpack を構成し、メイン バンドルに ReactDOM を含めるにはどうすればよいですか?


注: webpack 2.1.0-beta17 と React 15.1.0 を使用しています。


更新react/lib/ReactDOM外観 に追加してみました。

しかし、次のエラーが発生します。

要求が定義されていません

0 投票する
1 に答える
1291 参照

javascript - react-dom/server はクライアント側で動作しますか?

クライアント側で最上位の html タグをレンダリングする必要があります (例: <html><head>...</head><body></body></html>)。結果は iframe に挿入されます。サーバーでは のrenderToStaticMarkup関数を使用しますreact-dom/serverが、クライアントのみreact-domにはこの関数がありません。

react-dom/server最新バージョンの react (現在 15.3.0) のクライアントで動作しますか? もしそうなら、react 開発チームから、将来のバージョンでも引き続きクライアントでサポートされるという兆候はありますか?