ReactコンポーネントのメソッドはHTMLをレンダリングしません

Question

こんにちは私はReactにはかなり新しいですし、少し苦労しています。私は経験するべきではないと思います。私は、最初のメソッドがtestであり、2番目が標準renderである2つのメソッドを持つコンポーネントを持っています。それをチェックアウト：私はプロジェクトのコンポーネント内{this.test}を使用してtestメソッドを呼び出すいたときに

var Projects = React.createClass({ 
    test: function(){ 
     return(
      <h1>Why</h1> 
     ) 
    }, 
    render: function(){ 

     return (
      <div className="postWrapper"> 
      <div id="projectsHeader"> 
       <h1>Projects</h1> 
      </div> 
      <div id="projectsBody"> 
       {this.test} 
      </div> 
      </div> 

     ) 
    } 
    }); 

問題があり、何もレンダリングしません。このメソッドをコンポーネント内で使用できるようにして、最終的に複数のアイテムをプログラムでレンダリングすることができます。私は間違って何をしていますか？私はReact Routerを使用しているので、{this.props.children}を使ってプログラムでレンダリングしているときに子小道具を渡す方法はわかりません。これはMasterLayoutコンポーネント内で何をしようとしたのですか？私は文脈のために私のコードの残りの部分を提供します、どんな助けも大歓迎です。

var MasterLayout = React.createClass({ 
    mixins: [History], 
    getInitialState: function(){ 
    return{ 
     hello: {} 
    } 
    }, 
    renderProjects: function(){ 
     return(
      <div> 
      <h1>This better work</h1> 
      </div> 
     ) 
    }, 
    render: function(){ 
    return(
     <div id="container"> 
      <Navigation /> 
      <div id="content"> 
      {this.props.children} 
      </div> 
     </div> 
    ) 

    } 
}); 

var Projects = React.createClass({ 
    test: function(){ 
     return(
      <h1>Why</h1> 
     ) 
    }, 
    render: function(){ 

     return (
      <div className="postWrapper"> 
      <div id="projectsHeader"> 
       <h1>Projects</h1> 
      </div> 
      <div id="projectsBody"> 
       {this.test} 
      </div> 
      </div> 

     ) 
    } 
    }); 

    var TestPage = React.createClass({ 

    render: function(){ 
     return(
      <div className="postWrapper"> 
      <div id="postHeader"> 
       <div id="titleDate"> 
       <h2>This is a test blog title</h2> 
       <span>1/1/2016</span> 
       </div> 
       <div id="testFrame"> 
       </div> 
      </div> 
      <div id="postBody"> 
       <p>...</p> 
      </div> 
      </div> 
     ) 
    } 
    }) 


var routes = (
      <Router history={history}> 
      <Route path="/" component={MasterLayout}> 
       <IndexRoute component={TestPage}></IndexRoute> 
       <Route path="/projects" component={Projects}></Route> 
      </Route> 
      </Router> 
) 



ReactDOM.render(routes, document.getElementById("app")); 

Answer 1

あなたはtestを呼び出すではありません。関数の結果ではなく関数自体を出力しようとしています。 this.testの後に()を追加してください：

var Projects = React.createClass({ 
    test: function() { 
     return(
      <h1>Why</h1> 
     ) 
    }, 
    render: function() { 
     return (
      <div className="postWrapper"> 
      <div id="projectsHeader"> 
       <h1>Projects</h1> 
      </div> 
      <div id="projectsBody"> 
       {this.test()} 
      </div> 
      </div> 
    ) 
    } 
});