問題タブ [isomorphic-javascript]

React.jsを使用したサーバー側レンダリングで概念的に何かが欠けていると思います

サーバー側の DB からアイテムを表示するページを作成し、それらをフィルタリングするための入力フィールドを使用するとします。

ページが欲しい:

• のような URL に応答します。/items?name=foobar
• React入力フィールドを使用してアイテムを名前でフィルタリングします
• React コンポーネントを使用して、フィルター処理された項目のリストを表示します

クライアント側でアイテムをクエリするパブリック REST API があるとします。

GET /items?name=foobar概念的には、最初のリクエスト ( )でやりたいことは次のとおりです。

• ユーザーがパラメーターとして渡したものを入力フィールドに表示したいので、クエリパラメーター (「foobar」) を「prop」(のようなinitialName)として反応コンポーネントに渡す必要があります。

だから私はこれを試しました：

• また、アイテムのリストを取得するためにサーバーでデータベース クエリを実行し、このアイテムのリストを ItemList の「小道具」として渡す必要があります (「initialItems」など)。

私が理解しているように、リストを表示して「小道具」として受け取る単純なコンポーネントが必要です。

• ここで、 Page 全体を表示するコンポーネントが必要です。このコンポーネントは、ページ全体の状態を維持する必要があります。つまり、フィールドに入力された名前を確認し、API クエリを作成してリスト アイテムを更新する必要があります。ただし、このコンポーネントがサーバー側とクライアント側での後でレンダリングの両方で機能する「initialState」を持つ方法がわかりません。

私はこれを試しました：

それが私が立ち往生しているところです。次のようなものを使用して、サーバー側で物事をレンダリングできます。

しかし、クライアント側の JavaScript を書き込もうとすると、どうすればよいでしょうか? dom をレンダリングする場所はわかっていますが、react コンポーネントに渡す必要がある最初の小道具は何ですか?

私が試したほとんどの試みは、クライアント側でDOMが「消去」され、次のメッセージが表示されます。

React はコンテナーで再利用マークアップを使用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください。

私の ItemList コンポーネントのマークアップだけが消去されていることに注意してください。これは私のコンポーネントの実装の問題だと思いますが、どこから始めればよいかわかりません。

私は正しい軌道に乗っていますか？または、何かを完全に見逃していますか？

derbyjs を使用するのは初めてです。私が愚かなのか、それともドキュメントが不足しているのかわかりません。「本」というモデルがあり、本のリストを表示しようとしています。

ここに私のコードがあります:

およびスキーマリスト

インデックスjs

ビューに「本」があることを期待しているので、次のように {{each}} を書きました

しかし、何も表示されませんが、これは正常に機能し、期待どおりにレンダリングされます

Webコンソールでも、これは正常に機能し、3冊の本が表示されます

注意: Web コンソールから書籍を追加しました。このようなものです。

サブスクライブ機能の中で、私はしようとしました

しかし、エラーが発生します

私が間違っていることは何ですか？私はderbyjsが本当に好きですが、これは数日間私を妨げています

私の問題

最初にサーバー側でコンポーネントをレンダリングし、次にブラウザ側で React のインテリジェントな再レンダリングを利用する、ReactでIsomorphic Application を構築しています。

React が最初にブラウザー側でレンダリングできるようになる前に、DOM が React コンポーネントの状態と同期しなくなる可能性がある状況に遭遇しました。これは、ユーザーのインターネット接続が低速で、react.jsファイルのダウンロードに時間がかかる場合に発生する可能性があります(これが、Isomorphic Application を構築している理由でもあります)。

例

これが起こっていることを示すために私がまとめた例です：http://jsfiddle.net/jesstelford/z4o44esb

• この例を実行します
• チェックボックスを切り替えます
• 「Render React」をクリック
• 現在の React の状態がコンソールに出力されます
• まだ { done: false } に設定されていることに注意してください。これは正しくありません

可能な（半分の）解決策

私は次を使用して1つの可能な解決策を見つけましたReact refs: http://jsfiddle.net/jesstelford/z4o44esb/2

このアプローチの欠点は次のとおりです。

• DOM がレンダリングされた後に状態が同期される
• 最初のレンダリングで同期するには、コンポーネント自体の外部に追加のコードが必要です

私の質問

React コンポーネントをサーバー側で事前レンダリングする場合、React がブラウザー側で読み込まれる前にユーザーが DOM を操作した場合、ブラウザー側でレンダリングする前に DOM の状態をその React コンポーネントに同期する方法はありますか?

ありがとう！

Reactjs を使用した同形アプリケーションでは、サーバーでレンダリングされたのと同じ初期状態をクライアントに渡す必要があります (これにより、イベント バインディングなどでアプリが「再水和」されます)。

この初期状態を下に渡すための 2 つのアプローチを見てきました。

ウィンドウにグローバル変数を設定する:

または、JSON オブジェクトとして渡します。

どちらも、アプリケーションのどこからでも簡単に取得できます。一方を他方よりも使用する利点はありますか？

マーケティング ランディング ページを管理するための CMS システムを構築しています。[ランディング ページの編集] ビューで、ユーザーが編集しているランディング ページに関連付けられているスタイルシートを読み込めるようにしたいと考えています。Reactでこのようなことを行うにはどうすればよいですか?

私のアプリは完全に React であり、同形であり、Koaで実行されています。問題のページの基本的なコンポーネント階層は次のようになります。

ランディング ページのデータ (読み込むスタイルシートのパスを含む) は、 で非同期に取得されEditLandingPageますComponentDidMount。

追加情報が必要な場合はお知らせください。これを理解してもらいたいです！

おまけ: ページから移動するときにスタイルシートをアンロードしたいと思いますComponentWillUnmount。