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>

        )
    }
  });

问题是当我在Projects组件中使用test调用{this.test}方法时，没有任何渲染。我希望这个方法在组件中可用，这样我最终可以以编程方式呈现多个项目。我究竟做错了什么？由于我使用的是React路由器，我不知道如何使用{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"));