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功能需要更新以返回功能。你需要执行this.toRender

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

1 个答案: