2

バックエンドでマークアップをレンダリングするアプリケーション (Rails に組み込まれている) があり、ReactJS を使用してフロントエンドの追加機能で「拡張」したいと考えています。

コンテンツのレンダリングは次のようになります。

<%= react_component :TestComponent do %>
    <div class="foo">
        Here's some content.
    </div>
<% end %>

data-この呼び出しは、 react_ujs がキャプチャして React コンポーネントをインスタンス化するいくつかの属性を持つラッパー div を作成します。私が失敗しているのは、(jquery を使用してややクレイジーなトリックを行う方法を除いて) このマウント要素の内容 (つまり、クラス「foo」を持つ内部 div とその内容) を取得する方法を見つけることです。 React コンポーネントを作成して、JSX に含めることができるようにします。

React.createClass({
    render: function() {
        return (
            <div className="my-component">
                { mount point contents here! }
            </div>
        );
    }
});

この動作は、AngularJS 用語で「トランスクルード」と呼ばれるものです。

ReactJS でこの動作を実現する方法はありますか? へのポインタをいくつか受け取りましたthis.props.childrenが、これでは必要な結果が得られないようでundefined、マウント要素にコンテンツが含まれている場合でもそうなるでしょう。

4

1 に答える 1

1

これは、React ではサポートされていない機能です。React は実際の HTML では機能しません。関数呼び出しで機能します。JSX は HTML のように見えますが、React によって実行される前に関数呼び出しにコンパイルされます。つまり、例で渡しているように、React は実際の HTML をどう処理すればよいかわからないということです。

JSX :

<div className="foo">
  Here's some content
</div>

挿入しようとしているコンテンツに似ているように見えますが、クライアントには最終的に次のように表示されます。

反応する：

React.DOM.div({className: "foo"},
  "Here's some content"
)

ヘルパーはJSX react_component(HTML ではない) を受け入れ、ページにレンダリングする前に JSX コンバーターを介して実行する必要があります。次に、結果をコンポーネントに渡し、それを として参照できますthis.props.children。

これはreact_component、例で出力する必要があるものです。

React.renderComponent(
  TestComponent(null,
    React.DOM.div({className: "foo"},
      "Here's some content"
    )
  ),
  referenceToDomNode // Not obvious where you pass this with your helper
);

そして、あなたTestComponentは次のようになります：

var TestComponent = React.createClass({
  render: function() {
    return (
      <div className="my-component">
        {this.props.children}
      </div>
    );
  }
});
于 2014-04-18T16:03:48.943 に答える