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节点内。

如何在我的 HTML 中UserComponent节点内的特定节点中呈现?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>

然后,我们可以定义UserComponentOtherComponent(s)我们去。

于 2014-04-30T06:24:10.803 回答
0

我可能会误解你,但你应该能够做到:

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

渲染到#userdiv 中。

于 2014-04-29T15:28:02.140 回答