問題タブ [react-dom]

React/react-dom には、ユーザーが 2 つの dom を手動で比較し、差分を取得し、差分を dom に手動で適用できる機能がありますか?

現在のように、差分とパッチのプロセスは内部で行われているようですが、個別に行うことを望んでいます。

定義された要素があり、ref最終的にページにレンダリングされます:

などのDOM要素のプロパティにアクセスしたいoffset...。しかし、私は取得し続けてundefinedおり、その理由がまったくわかりません。いくつかの検索の後refs、1 つのファイルにのみ適用されることは明らかですが、この 1 つのページ以外では使用していません。私はそれを記録するためにこれを言っています：

console.log('REFS', this.refs.russian);

何が原因でしょうか?

私は、状態ディスパッチ/サブスクライブ ロジックが React の「フロー」から分離されている (つまり、React-Redux バインディングのようなヘルパーがない) 単一オブジェクトの状態駆動型アプリケーションを持っています。

状態が変わると、アプリが再レンダリングされます。

次の 2 つの実装に違いはありますか、またはアンチパターンの問題はありますか? （私がJSXを使用していないことに腹を立てている人には申し訳ありません）

対...

1 つ目は、「外部」から、つまり ReactDOM を使用して、アプリ全体の再レンダリングを強制します。2 つ目は、コンテナー アプリ内で同じことを行います。

いくつかのパフォーマンス テストを行いましたが、実際には違いは見られません。今後問題が発生することはありますか? ReactDOM.render() を何度も叩くのは問題ですか?

アプリ全体をそれぞれ再レンダリングしているため、両方の方法がおそらく高価であるとコメントする人もいると思いますが（Reactの目的ではありません;））、それはこの質問の範囲外です。

こんにちは、この種の質問が何度も寄せられていることは知っていますが、答えが得られませんでした。

React hello world の例を書こうとしています。app.jsxとhomepage.jsxの2つのファイルしかありません。ファイルをバンドルするためにwebpackを使用しています。

しかし、コードを実行すると、Uncaught ReferenceError: React is not defined

私のホームページ.jsxは次のようになります

私のapp.jsは次のようになります

Uncaught ReferenceError: React is not definedブラウザでは、7行目、つまりホームページが必要な場所にスローされます。

しかし、 app.jsx に var React = require('react') を追加すると、正常に動作します。

私はこれを理解していません。私はそれを利用しているhomepage.jsxにreactを含めました。app.jsx では、React を使用しないため、react-dom のみが必要です。次に、app.jsx でエラーが発生する理由。

助けてください!!

ReactDOM.findDOMNode(this) の子を取得して、参照に基づいてスタイルを設定できるようにします。具体的には、一部の参照を表示せず、他の参照を表示します。

できると思った

エラー応答:

PSまた、 createFragment() で blockNode をラップしようとしましたが、うまくいきませんでした

親コンポーネントで定義された子コンポーネントの DOM ノードにアクセスしたい。以下のサンプルでは、​​「try1」と「try2」の両方の方法を試しましたが、どちらも機能しません。「theDiv」ref の DOM ノードを取得するにはどうすればよいですか?

ReactのES6 クラス API をReact.Component(TypeScript を使用して) 使用しており、タイプを使用してサブタイプ化されたクラスをレンダリングしたいと考えていますReactDOM.render()。

次のコードが機能します。

ここで、 のコンストラクターの明示的な型付けをreact.d.ts考えると、(上記のコードで行ったように) 初期プロパティを設定する MyCustomProps オブジェクトのインスタンスを渡すことができると思います。しかし、コンポーネントを JSX/TSX 構文なしで直接レンダリングする方法は?

以下は機能しません。

回避策として JSX 構文を使用できることはわかっていますが、MyCustomPropsオブジェクトがかなり大きいため、オブジェクトのすべてのメンバーを繰り返したくありませんMyCustomProps。

この記事では、Facebook の ReactDOM を独立したエンジンとして使用することに言及しています。React コンポーネントなしで使用する。しかし、これを行う方法に関するドキュメントは見つかりません。

これは可能ですか？

Reactコンポーネントでない場合、ReactDOM.renderに何を供給するかに関するドキュメントはありますか?

ありがとう。

これは React で繰り返し発生する問題です。このcomponentDidMountメソッドは、コンポーネントが初めてレンダリングされるときに必ず起動されることが保証されているため、高さやオフセットなどの DOM 測定値を取得するのに自然な場所のように思えます。ただし、コンポーネントのライフサイクルのこの時点で、間違ったスタイルの読み取り値を受け取ることがよくあります。デバッガーを中断すると、コンポーネントはDOM にありますが、まだ画面に描画されていません。ほとんどの場合、幅/高さが 100% に設定されている要素でこの問題が発生します。測定を行うと、componentDidUpdateすべて正常に動作しますが、このメソッドはコンポーネントの最初のレンダリングで起動しません。

だから私の質問は -componentDidMountすべてのブラウザの描画が完了した後に明らかに起動されないため、いつ正確に起動されるかです。

編集: この Stackoverflow の問題は、同じ主題を扱っています。

また、何が起こるかを説明するこの github の会話も参照しています。