同形反応WebアプリケーションでUIが変更されたときにHTMLマークアップが変更されない

Question

reactを使用して、サーバーサイドレンダリングのサンプルページを作成します。renderToString（）

これは私のページは、最初は静的であり、ユーザが入力を入力したとき、それはバックエンドからデータを取得し、一覧をレンダリングし、検索ページで私のserver.jsコード

app.get('*', (req, res) => { 
 
    match(
 
    { routes, location: req.url }, 
 
    (err, redirectLocation, renderProps) => { 
 
     // in case of error display the error message 
 
     if (err) { 
 
     return res.status(500).send(err.message); 
 
     } 
 
     // generate the React markup for the current route 
 
     let markup; 
 
     if (renderProps) { 
 
     markup = renderToString(<RouterContext{...renderProps}/>); 
 
     } else { 
 
     res.status(404); 
 
     } 
 
     // render the index template with the embedded React markup 
 
     return res.render('index', { markup }); 
 
    } 
 
); 
 
});

です同じページ内のコンポーネント

ブラウザでビューページのソースを見ると、バックエンドの応答後にレンダリングされるリストのhtmlではなく、最初の静的コンテンツのみが表示されます。

コンポーネント状態が変更されたときに更新されたHTMLを取得する正しい方法は何ですか。

Answer 1

フェッチされたデータを状態に保存すると、コンポーネント自体が再レンダリングされます。そうすれば、新しいコンテンツがバックエンドから取得されたときにそのコンテンツが表示されます。

Answer 2

あなたのクライアントサイドにコンポーネントを組み込み、それ自体をリアクションし、React.renderをDOMの同じ基本要素に呼び出す必要があります。

React.renderToStringの結果をスタティックHTMLとして処理するだけで、正確に処理されます。スタティック html。

clientsideイベントに反応して状態の変化を再描画できるようにコンポーネントをクライアント側で適切にマウントしたい場合は、static htmlにマウントする必要があります。これはReact.renderを呼び出して行いますクライアントサイドのページ読み込み

ここでこの詳細があります：https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/