在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> 
    ) 
    } 
});