1

次のコンポーネント階層を検討してください。

var FundComponent = React.createClass({
    render : function() {
      return (
        <div>
        <UserComponent profile={data} />
        </div>
        );
    }
  });

var UserComponent = React.createClass({
    render : function() {
      return (
        <div>
        Some Stuff goes here
        </div>
        );
    }
  });

React.renderComponent(<FundComponent />, document.getElementById('fund'));

これにより、HTMLUserComponentのノード内にレンダリングされます。#fund

HTMLUserComponentのノード内の特定のノードでレンダリングするにはどうすればよいですか? fund例えば：

<div id="fund">
<div id="otherStuff">Stuff</div>
<div id="user">**load UserComponentHere**</div>
</div>
4

2 に答える 2

1

少し読んだ後、私はこれを行う方法を見つけました。お気軽に訂正してください。

Reactこれをどのように行うかについては、異なる概念があります。

html ファイルで html を事前に定義するのではなく、次のrenderように関数で定義します。

var FundComponent = React.createClass({
    render : function() {
      return (
        <div>
          <div className="myOtherStuff1">
            <OtherComponent1 data={data} />  //other stuff
          </div>
          <div className="user">  //user
            <UserComponent profile={profile} />
          </div>
          <div className="myOtherStuff2">
            //can have component or other static stuff. Upto developer.
          </div>
          ...
        </div>
      );
    }
  });

React.renderComponent(<FundComponent />, document.getElementById('fund'));

そしてhtmlは次のようになります： <div id="fund"></div>

そして、 と を定義することができUserComponentますOtherComponent(s)。

于 2014-04-30T06:24:10.803 に答える