0

React と Node (Isomorphic Rendering Architecture) を使用してアプリを構築しようとしています。github サンプル プロジェクトで見つけましたが、問題があります。同じコンポーネントがクライアントとサーバーから同時にデータ/アクションを取得できるように、プロジェクトのクライアントとサーバーを一緒に開発したいと思います。例えば：

var Component = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        {this.props.client}
        {this.props.server}
      </div>
    );
  }
});

コンポーネントがクライアントとサーバーから一緒に小道具を取得することがわかります。どうすればこれを行うことができますか? 3 つの github プロジェクトを試しましたが、常に実装できません。どうしてか分かりません。もちろん、コンポーネントをサーバーのみまたはクライアントのみでレンダリングすると機能しますが、一緒には機能しません。

たとえば、サーバーごとにコンポーネントをレンダリングすると、クライアントに固有のアクションを作成できません (onclick アラートなど)。だからこそ、私にとって重要なのです。サーバーからいくつかのデータをレンダリングし、いくつかのクライアント アクションを実行します。しかし、一緒に、まだ同じコンポーネント上にあります。

下手な英語でごめんなさい！

4

2 に答える 2

0

Jan、React を使用してこれを行うことは不可能です。

それらは「同時に」機能しません。
サーバー側の React コードは、HTML ページをテキスト文字列として構築し、HTML テキストをクライアントに提供することによって機能します。
ブラウザーがページをロードした後、ブラウザーの React コードは、ページに配置された React コードにアタッチされます (サーバーはすべてのコンポーネントの ID を出力し、ブラウザーがアタッチできるようにするため)。

目標は、ブラウザとサーバーの両方に同時にアクセスできることを期待するのではなく、データをコンポーネントにフィードすることです。そうすれば、サーバー側のコードを使用してコンポーネントのデータを取得でき、クライアント側のコードを使用してコンポーネントのデータを取得でき、コンポーネントは気にしません。

一般的に、これは React の有効な方法、または JS を実行する正しい方法ではありませんが、以下をご覧ください。

class ServerElement {
  render ( ) {
    // sync calls should rarely ever (ideally never, other than booting up) be used
    var articles = db.syncGetArticles();

    return <Articles articles={ articles } />;
  }
}

class BrowserElement {
  render ( ) {
    // isn't real, and should never be used even if it was
    var articles = ajax.sync("GET", "/articles");

    return <Articles articles={ articles } />;
  }
}

ここで重要な部分は、Server 要素や Browser 要素ではなく (先ほど言ったように、実際には機能しません)、<Articles />要素がサーバーやブラウザーを想定していないことです。記事のリストを期待しています。

このアプローチの利点は、サーバーが HTML を構築することですが、ページが提供される前にデータが事前に入力され、後でブラウザーで更新 (置換または追加) されます。

お役に立てば幸いです。そうでない場合は、質問してください。回答に追加しようとします。

于 2016-01-03T22:11:29.427 に答える
0

@Norguard包括的な回答ありがとうございます。私はあなたの答えを所有しようとしています。モデル領域でデータベースアクションを構築する必要があるため、サンプルコードが React/JS に対して有効でないことはわかっています。しかし、1つのことが私を困惑させます。「/articles」で API を送信し、そこからデータを取得します。OK、それはクールですが、これはまだ公開データです。個人情報が気になります。React Isomorphic を使用して特定のデータまたはサーバーの if/else 条件を取得し、より優れたアプリを構築する方法。

クライアント側のテンプレート言語 (ejs など) を使用している場合は、非常に簡単です。テンプレート言語用の特定のタグに対して、.html ファイルとインジェクション サーバー メソッド (または何でも) を構築しています。Reactサーバーで同じことをするにはどうすればよいですか? コンポーネントとサーバーを使用してこれを想像することはできません。

あなたが示してくれたアイデアは理解できたと思いますが、React を使用して Isomorphic アプリを効率的に構築するには時間が必要です。

于 2016-01-04T12:23:15.880 に答える