2017-01-05 9 views
2

私はReactを初めて使う人です。私はいくつかの基本を理解しようとしています。 EJSやJadeなどの他のテンプレートエンジンでは、ルートファイル/コントローラファイルでビューファイルをレンダリングするときにコンテキスト変数を渡すことができます。しかし、私はReact/jsxでこれを行う方法を見つけていません。私はExpressと協力していることに注意してください。React/jsxビューにコンテキストを渡すには?

jsxがビューエンジンであるかどうか、またはReactが何らかの形で組み込まれているかどうかは実際にはわかりません。どちらの場合でも、サーバーからビューファイルにコンテキストを渡す方法はわかりません。

たとえば、プロファイル情報(サーバー/バックエンドに格納されている)をロードする場合、そのファイルをReact/jsxのフロントエンドjsxビューファイルにどのように渡しますか?

答えて

2

これは簡単です。 MVCの用語には混乱がありますが、Reactコンポーネントは単に「View」ではなく「View + Controller」であるといいと思います。

テンプレートエンジンとまったく同じように、コンポーネントのrender()関数がテンプレートです。また、component.state(コンポーネントにローカル)とcomponent.props(上位コンポーネントから受け取った引数)の両方を「コンテキスト」として使用できます。

JSワールドの保守的な部分のReactコンポーネントと非常によく似ていたいのなら、それはBackboneのViewです(元のMVC用語を使用している場合はビュー+コントローラです。 。概念的には、それは同じことです。 JSXはEJS(または何でも)の代わりにrender()で使用されます。それだけです。

Btw、Reactのcontextという概念は何か異なります。 contextが公開されているコンポーネント から始まる、コンポーネントサブツリー全体に表示される の小道具と考えてください。

たとえば、プロファイル情報(サーバー/バックエンドに格納されています)をロードする場合は、そのファイルをReact/jsxのフロントエンドjsxビューファイルにどのように渡しますか?最も単純なケースで

、あなたはトップレベルを作成マウントに必要なものをロードしコンポーネント、(componentWillMount())と反応しますが、サーバーからの応答を受信しますと、stateそのローカルにそれを置く(this.setState(...) )、その状態の要素(this.state)を、render()関数内のサブコンポーネント(<List items={ this.state.items } />)としてサブコンポーネントに渡します。

statethis.setState(...)に変更すると、コンポーネントのサブツリー全体が再びレンダリングされます。それがどのように機能するのですか?最も単純な場合。

関連する問題