는 this.props.children 렌더링되지 반작용

Question

내가 지금처럼 내 웹 애플리케이션 (페이지에 대한 즉, 헤더, 탐색 및 래퍼)의 구성 요소로 전체 탐색 만들려고 해요 :

const Navigation = React.createClass({ 
    render: function() { 
     console.log(this.props.children); 

     return (
      <div id="authenticated"> 
       <div id="header">...</div> 
       <div id="left-menu">...</div> 
       <div id="page"> 

        {this.props.childen} 

       </div> 
      </div> 
     ); 
    } 
}); 

이것은이다 나는 구성 요소를 사용 Dashboard.jsx에서 사용 방법 :

import { Navigation } from '../../components' 

const Dashboard = React.createClass({ 
    render: function() { 
     return (
      <Navigation> 
       <p>Hello</p> 
      </Navigation> 
     ); 
    } 
}); 

그것은 구성 요소 렌더링 (순자산 가치 (NAV), 헤더, ...)하지만 <p>hello</p> 렌더링하지 않습니다. 콘솔 로그에 반응 객체로 <p>hello</p>이 표시되지만 페이지에 표시되지 않습니다!

아이디어가 있으십니까?

PS : 나는 본 적이 그것은 문제가 아니다 : React ES6 | Child Component not being rendered 당신은 오타를 가지고

Answer 1

, this.props.childen 제공된 코드에서 this.props.children

const Navigation = React.createClass({ 
    render: function() { 
     return (
      <div id="authenticated"> 
       <div id="header">...</div> 
       <div id="left-menu">...</div> 
       <div id="page"> 
        {this.props.children} 
       </div> 
      </div> 
     ); 
    } 
}); 

full working example