問題タブ [react-dom-server]

カスタマイズされた画像をレンダリングするための React コンポーネントがあります。簡略化した形式では、次のようになります。

Web ページは によってサーバーでレンダリングされReactDOMServer、<img>要素は (意図的に) 最初の HTML ドキュメントに既に存在しています。ただし、それらのonLoadイベント ハンドラは. の特徴だと思いますReactDOMServer。

カスタマイズされた画像の一部、特に小さい画像の読み込みが、JavaScript が読み込まれる前、実行が開始される前、または少なくとも React がイベント ハンドラーを設定する前に完了することがありonLoadます。その結果、onLoadこれらのイメージのイベントによってイベント ハンドラーが呼び出されることはありません。

React でレンダリングされた要素onLoad内に設定されたイベント ハンドラーが、基になる画像の読み込みが完了した後に常に呼び出されるようにする方法はありますか?<img>

私の最も重要な制約は、React を使用したいということと、サーバーでレンダリングされる HTML ページに、属性が正しく設定された<img>要素を含める必要があることです。src

React コンポーネントの 1 つを静的 HTML にレンダリングしたいので、それはサーバーから返された index.html にあります。

サーバーの起動中にコードがこれを行うのではなく、HtmlWebpackPlugin が React コンポーネントを生成された index.html にレンダリングすることをお勧めします。これは可能であり、非常にうまく機能します。ただし、 SCSS をインポートする React コンポーネントでこれを試みるとすぐに、次のエラーが表示されます。

エラー: /Users/calumjames/htmlwebpackplugin-error-react-rendering/tools/webpack/indexRenderer:5396
return window && document && document.all && !window.atob;
^
ReferenceError: ウィンドウが定義されていません

問題の例を示す簡単な Git リポジトリを作成しました。README ファイルに記載されているように、Loadingコンポーネントで SCSS をインポートする行がコメント化されている場合、このエラーは表示されなくなり、コンポーネントは index.html に正しくレンダリングされます。

コンポーネントは内部共有コンポーネントであり、コーディング スタイルは他の共有コンポーネントと一致するため、コンポーネントのコーディング方法を変更しないこともできます。

コードまたは構成に何か問題がありますか? それとも、Webpack プラグインまたはローダーのいずれかに問題がありますか?

react-dom/server を理解しようとしています。

サーバーとしてエクスプレスを使用して、反応するアプリケーションがあります。

私は次のような高速ルートを持っています:

でサーバー ファイルを実行するとnode app-server、次のエラーが発生します。

そこの例に基づいて、JSXをrenderToStringに渡しました： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/StaticRouter.md

Express サーバー ファイルでこの JSX コードを処理するにはどうすればよいですか?

クライアント側では、babel ローダーで webpack を使用していますが、問題なく動作します。