Reactjs

Question

에서 사용자 지정 DOM 노드의 내부 구성 요소를 렌더링하는 것은 다음과 같은 구성 요소 계층 구조를 고려 : 이것은 내 HTML에서 #fund 노드 내부 UserComponent를 렌더링

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 노드 안에있는 특정 노드에 어떻게 렌더링 할 수 있습니까? 예를 들면 : 당신을 오해 할 수 있지만, 당신은 단순히 할 수 있어야

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

Answer 1

조금 주위를 읽은 후, 나는이 문제를 어떻게 해결할 수 있는지 알아 냈습니다. 저를 시정 해주십시오.

React에는이 개념에 대해 다른 개념이 있습니다.

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은 다음과 같습니다 : 이상

오히려 사전은-정의하는 HTML 파일에 HTML을, 우리는 지금처럼 render 기능에 정의 다음 <div id="fund"></div>

을, 우리 우리가 간다대로 UserComponent과 OtherComponent(s)을 정의 할 수 있습니다.

Answer 2

:

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

는 #user DIV로 렌더링합니다.