在Reactjs

Question

渲染內件的自定義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')); 

這將使UserComponent在我的HTML的#fund節點內。

如何在我的HTML中的fund節點內的特定節點中渲染UserComponent？例如：

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

Answer 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)。

Answer 2

我可能會誤解你，但你應該簡單地能夠做到：

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

渲染到#user格。