Javascript 如果在索引路径上，则呈现内容

使用react router，并且当前仅当我在索引路径

“/”

上时才尝试呈现某些内容，以及其他内容

这就是我到目前为止所想到的，没有出现错误，但它似乎与代码不兼容

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()}
    }
}

---

你做错了。您的

renderContent

、

renderHomepage

和

toRender

是在您的类之外定义的，并且无权访问此.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()}
 ...

export default React.createClass({
renderContent（）{
...
}
renderHomepage（）{
...
}
托伦德（）{
如果（this.props.path=='/'））{
返回此.renderHomepage（）；
}否则{
返回此.renderContent（）；
}
}
render（）{
返回(
{this.toRender（）}
...

---

将渲染函数放入

React.createClass

中应该可以工作。需要更新toRender函数以返回函数。您需要执行此操作。toRender

您做错了。您是

renderContent

，

renderHomepage

和

toRender

是在类a之外定义的nd没有访问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()}
 ...

export default React.createClass({
renderContent（）{
...
}
renderHomepage（）{
...
}
托伦德（）{
如果（this.props.path=='/'））{
返回此.renderHomepage（）；
}否则{
返回此.renderContent（）；
}
}
render（）{
返回(
{this.toRender（）}
...

---

将渲染函数放入React.createClass中应该可以工作。您的toRender函数需要更新才能返回函数。您需要执行此操作。toRender

一些路由定义如何？您是否可以将它们也包括在内？将它们编辑到问题中一些路由定义如何？请您加入也包括这些吗？将它们编辑到问题中嗯，我明白你的意思，但我在这里得到一个错误：

super（）类外构造函数

哦，我搞砸了，我只是盲目地复制和粘贴，并认为您在扩展

React.Component

但您正在使用

createClass

删除构造函数应该可以工作是的，我想是的！不过，现在没有错误，但我从

toRender（）中什么也没有得到

函数。即使它看起来像

toRender（）{{this.renderHomepage（）}}，

但是如果我把

{this.renderHomepage（）}

而不是

{this.toRender（）}

，正确渲染。哦，看起来你需要更新你的toRender函数来返回其他渲染函数，而不是仅仅执行它们。更新了我答案中的代码。哦，你需要在renderHmm中执行这个。toRender我明白你的意思，但我在这里得到一个错误：

super（）类外构造函数

哦，我搞砸了，我只是盲目地复制和粘贴，并认为您在扩展

React.Component

但您正在使用

createClass

删除构造函数应该可以工作是的，我想是的！不过，现在没有错误，但我从

toRender（）中什么也没有得到

函数。即使它看起来像

toRender（）{{this.renderHomepage（）}}，

但是如果我把

{this.renderHomepage（）}

而不是

{this.toRender（）}

，正确渲染。哦，看起来您需要更新toRender函数以返回其他渲染函数，而不是仅执行它们。更新了我回答中的代码。哦，您需要在渲染中执行此.toRender

import React from 'react'

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

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()}
 ...