問題タブ [isomorphic-javascript]

Node (express) サーバー側からレンダリングされたときに、初期の props を React コンポーネントに渡すのに問題があります

これが私のコンポーネントの短いバージョンです:

そしてこちらがサーバーサイド

locationsrender() メソッドで使用しようとすると、prop がコンポーネントに渡されていないようです。

何か案が ？

たとえば、アプリケーションの言語を次のように定義したいcatberry-l10nプラグインを使用します。

React-flux-cart . この例には、react のクライアント側コードのみが含まれています。同形にする方法。ノードを含めてサーバー側でもそのまま実行するために変更が必要な場所は何ですか。

Catberry にはコンポーネントの要件があります。すべての ID が一意でなければなりません。

入れ子になったコンポーネントの階層が複雑な場合に一意の ID を作成するためのベスト プラクティスは何ですか?

clojure/clojurescript/reagentntで同型アプリを作っています。サーバー側のレンダリング用に clojurescript の出力 js ファイルに依存しているため、jar がコンパイルされる前にそのファイルをコンパイルしたいと考えています。それ、どうやったら出来るの？

「lein uberjar」の出力は、jar が最初にコンパイルされることに注意してください。私の clj ファイル "nash.clj" は、コンパイルされた server-side.js ビルドを実行する必要があります。

そして、私の project.clj... cljsbuild 全体は現在、私にとって謎です。

私は最近、アプリケーションのルートを処理するために、 react-routerを備えた同形アプリで Flux Architecture を使用しています。私の質問は、ルートが変更されたときに外部 API からデータをロードする方法です。

例：

• http://myapp.com/#/search/:param1/:param2 => ResultComponent を表示 (データをロードし、ResultComponent に状態を設定)
• http://myapp.com/#/detail/:id => DetailComponent を表示 (データをロードし、DetailComponent に状態を設定)

私が理解しているように、データは Action にロードする必要があります。しかし、これに関する簡潔な例は見つかりませんでした。

私はES6を使用しています。

同形アプリを作成するために、サーバー側とクライアント側の両方のルーティングに反応ルーターを使用しています。サーバーのルーティングは正常に機能し、データを正常に取得できますが、クライアントでは、最初にクリックしたリンクで、URL の変更時に react-router のコールバックが呼び出されます。その後のクリックでは、何らかの理由でコールバックがトリガーされません。

サーバーで反応ルーターのメイン実行メソッドを実行しています。

クライアントで私は以下を実行しています

私の client.js では、react ルーターの実行のコールバックが 1 回だけ呼び出されますが、これは私には奇妙です。目に見えるエラーはありません。誰でもアイデアはありますか？

React ベースの SPA をサーバー側でレンダリングしたいと思います (最近はそうではありません)。したがって、React をreact-router、redux 、およびisomorphic starterkitのようなビルド レイヤーと組み合わせたいと考えています。

すべてを結合するhapi Universal reduxがありますが、フローを整理する方法に苦労しています。私のデータは、REST API の複数のエンドポイントから来ています。コンポーネントが異なればデータのニーズも異なり、クライアントにジャスト イン タイムでデータをロードする必要があります。サーバーでは、特定のルート (コンポーネントのセット) のすべてのデータを取得し、必要なコンポーネントを文字列にレンダリングする必要があります。

私の最初のアプローチでは、redux のミドルウェアを使用して非同期アクションを作成しました。これは、データをロードし、promise を返し、SOME_DATA_ARRIVEDpromise が解決されたときにアクションをトリガーします。次に、レデューサーがストアを更新し、コンポーネントが再レンダリングされます。すべて問題ありません。原則として、これは機能します。しかし、ルーティングが始まると、流れがぎこちなくなることに気付きました。

多数のデータ レコードを一覧表示する一部のコンポーネントには、レコードをフィルター処理するための複数のリンクがあります。フィルタリングされたすべてのデータ セットは、 のような独自の URL を介して利用できる必要があります/filter-by/:filter。そのため、さまざまなコンポーネントを使用<Link to={...}>して、クリック時に URL を変更し、ルーターをトリガーします。ルーターは、現在の URL によって表される状態に従ってストアを更新する必要があります。これにより、関連するコンポーネントが再レンダリングされます。

それを達成するのは容易ではありません。最初にアクションをトリガーしようとcomponentWillUpdateしました。これにより、データが非同期に読み込まれ、ストアにデータが入力され、コンポーネントの再レンダリング サイクルがもう 1 回発生しました。ただし、これはサーバーでは機能しません。3 つのライフサイクル メソッドしかサポートされていないためです。

だから私はこれを整理する正しい方法を探しています。ユーザーの観点からアプリの状態を変更するアプリとのユーザー インタラクションは、URL を更新する必要があります。IMOこれにより、ルーターは何らかの方法で必要なデータをロードし、ストアを更新し、調整プロセスを開始する必要があります。

だからinteraction -> URL change -> data fetching -> store update -> re-render。

initial state要求された URL からロードするデータを決定し、その状態をstore生成して reduxの生成に渡すことができるため、このアプローチはサーバーでも機能するはずです。しかし、私はそれを適切に行う方法を見つけていません。したがって、私には次のような疑問が生じます。

1. まだ理解していない/知らないことがあるため、私のアプローチは間違っていますか?
2. redux の REST API からロードされたデータを保持するのは正しいstoreですか?
3. stateコンポーネントをredux に保持し、store他のコンポーネントを自分で管理するのは少し厄介ではありstateませんか?
4. 持っているという考えはinteraction -> URL change -> data fetching -> store update -> re-render単に間違っていますか？

私はあらゆる種類の提案を受け付けています。