問題タブ [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.
reactjs - ReactServer#RenderToString が正しくレンダリングされない
Express の React コンポーネントを使用してサーバー側のレンダリングを実行し、Jade を使用してテンプレートを作成しようとしています。しかし、私はいくつかの問題に直面しています。
これが私のサーバーコード、エントリーポイントです。
これが私のIndexコンポーネントです。実際には、私のコンポーネントで div をレンダリングしているだけChatTextBoxです。これは次のとおりです。
編集：
これが私の翡翠のテンプレートです。test.jade
問題: 1) 正しくレンダリングされません。結果は次のとおりです。
「<」、「>」記号とともに、コンポーネントを2回レンダリングしています..？
2) バインディング状態と動的レンダリングに関して、どのフックも機能しません。これは理にかなっていますが、静的な HTML を jade でレンダリングしています。では、これを動的に達成するにはどうすればよいでしょうか。（これは少し話題から外れていると思います。これについては別の懸念を抱くことができます）。
読んでくれてありがとう、うまくいけば、この投稿は十分に明確でした.
javascript - React を使用したサーバー側レンダリング - テンプレートがまだ必要かどうかについて混乱している
私はこのプロジェクトを見ていました https://github.com/DavidWells/isomorphic-react-example
この問題を開いた https://github.com/DavidWells/isomorphic-react-example/issues/25
HTML テンプレート ファイルを引き続き使用する必要がありますか? ... または、バックエンドで React コンポーネントを使用して、次のようにレンダリングすることもできます。
React は<html> <body> and <head>タグを許可しますか?
その場合、次のように、テンプレートとして機能する親 React コンポーネントを作成できます。
これを行う正しい方法は何ですか？
node.js - React を使用したサーバー側レンダリング - コンポーザビリティ => 子コンポーネントを親に渡す
これが可能かどうかは疑問です。
次のような親コンポーネントがあります。
私がやりたいのは、小道具を使用して子コンポーネントを親コンポーネントに「渡す」ことです。
このようなもの：
通常、親コンポーネントには、その子への「ハードコーディングされた」参照があります。しかし、私が探しているのは、親 React コンポーネントが必要に応じてさまざまな子を「採用」できるようにするためのパターンです。
これは可能ですか？
おそらく、これを行う正しい方法は次のようなものです。
javascript - プレーンDOM要素のfindDOMNodeとgetElementById
この質問に対する本当の答えがあるかどうかはよくわかりませんが、React アプリで通常の DOM 要素を見つけるには、
を。refs と ReactDOM.findDOMNode
また
b. 普通の古い document.getElementById
reactjs - Uncaught Invariant Violation: アンマウントされたコンポーネントで findDOMNode が呼び出されました
管理者ダッシュボードのセットアップ:
ナビゲーション メニューのある管理ダッシュボードがあります。
<AdminHeader />さまざまな管理セクションにルーティングされ、 AdminDashboards を使用して読み込まれるメニューで構成されます{this.props.children}。
ログイン フォームから管理者ダッシュボードにアクセスすると、変数 isAuthenticated を true に設定するアクションがディスパッチされます。isAuthenticated は、ログインの成功時にレデューサーを介してすべてのコンポーネントで利用できるようになります。isAuthenticated は、サーバーから受信したトークンに基づいて設定され、トークンはブラウザーの localStorage に格納されます。
しかし、ユーザーが localStorage からトークンを削除するとどうなるかを確認したかったのです。
私は設定しました
これで、ユーザーが localStorage を手動で削除した場合、更新時にユーザーはログイン画面に戻されます。しかし、私は単一ページのアプリを開発しており、ユーザーが更新せずに別のルート/URL にルーティングするたびに、localStorage のトークンがまだ存在することを確認したいと考えています。
したがって、私はこのコードを書きました：
しかし、Uncaught Invariant Violation: findDOMNode was called on an unmounted component というエラーが表示されます。
だから私はそれを次のように変更しました：
それでも同じエラーが発生します。そこで、上記のコードを次のように変更しました。
すべてが機能しましたが、何らかの理由でこれが正しい方法ではないと思います。
私は最初にルート変更でこの問題を解決しようとしました:
しかし、リッスンは 1 回のルート変更で 2 回または 3 回起動していました。
上記のコードは正しいですか、またはそれを解決するためのより良い方法はありますか? 基本的に、誰かが localStorage からトークンを手動で削除した場合にログインするようにルーティングしたいだけです。
React、React ルーター、Redux、および React redux の最新バージョンを使用しています。
ありがとうございます。
node.js - npm エラー! tarball.destroy は関数ではありません
こんにちは、react-dom モジュールのインストール中に問題が発生しました。
Windows 10.64ビットマシンに、react Expressモジュールなどの他のモジュールをインストールできます
javascript - カスタム解析を介して HTML 文字列を React コンポーネントにレンダリングする
次のようなサーバーから取得したhtml文字列があります。
<img class="cover" src="someimg.jpg">ここで、一部を自分の React Component に変換して html を変換したいと考えています<LazyLoadImg className="cover" src="someimg.jpg" />。
サーバーのレンダリングや危険なSetInnerHTMLがなければ、どうすればいいですか?