javascript之在 Reactjs 中的自定义 DOM 节点中渲染内部组件

考虑以下组件层次结构:

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')); 

这将在我的 HTML 中的 #fund 节点内呈现 UserComponent。

如何在 HTML 的 fund 节点内的特定节点中呈现 UserComponent ？例如:

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

请您参考如下方法:

阅读了一些内容后，我找到了如何解决这个问题。请随时纠正我。

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)我们一起走。