如果在索引路径上呈现内容React JS

Question

使用react路由器，并且当前只在我处于索引路由"/"和其他内容之外的情况下尝试呈现某些内容。

这就是我到目前为止所提出的，没有错误出现，但它似乎没有与代码打得很好。

var renderContent = function() { 
    return (
     <div className="contain"> 
      {this.props.sidebar} 
      <div className="page"> 
       {this.props.main} 
      </div> 
     </div> 
    ) 
} 

var renderHomepage = function() { 
    return (
     <div className="homepage"> 
      {this.props.main} 
     </div> 
    ); 
} 

var toRender = function() { 
    if (this.props.path == '/') { 
     {this.renderHomepage()} 
    } else { 
     {this.renderContent()} 
    } 
} 

那么下面我继续：

export default React.createClass({ 
render() { 
    return(
    <div> 
     <div className="main-content"> 
     {toRender} 
... 

一切似乎都渲染上的任何路线。有任何想法吗？

编辑：

... 

import Home from './Home' 

module.exports = (
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="design" component={{main: deMain, header: deHeader, sidebar: sbAnimations}}> 
      <Route path="scheme" component={deScheme}/> 
     </Route> 
    </Route> 
) 

在我的Home组件看起来是这样的：

import React from 'react' 

export default React.createClass({ 
    render() { 
     return (
      <div className="hero"> 
      </div> 
     ) 
    } 
}) 

Answer 1

你就错了。你的renderContent,renderHomepage和toRender被定义为你的类的外部并且无权访问this.props.path。这些将需要在你的班级内部进行定义。像这样：

export default React.createClass({ 
renderContent() { 
    ... 
} 
renderHomepage() { 
    ... 
} 
toRender() { 
    if (this.props.path == '/') { 
     return this.renderHomepage(); 
    } else { 
     return this.renderContent(); 
    } 
} 
render() { 
    return(
    <div> 
     <div className="main-content"> 
     {this.toRender()} 
... 

把你的渲染函数React.createClass应该工作。你的toRender函数需要更新才能返回函数。你需要执行这个.toRender