在React組件中不顯示的方法HTML

Question

你好，我對React來說還是比較新的，我有一些麻煩，我認爲我不應該遇到。我有一個組件有兩種方法，第一種方法是test，第二種是標準render。檢查出來：

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> 

     ) 
    } 
    }); 

問題是，當我打電話使用項目組件內{this.test}的test方法，沒有任何渲染。我希望這個方法在組件中可用，這樣我最終可以以編程方式呈現多個項目。我究竟做錯了什麼？由於我使用的是反應路由器，我不知道如何通過兒童道具時，他們也正在使用{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> 
    ) 
    } 
});