如果在索引路由 React JS 上渲染内容

Render content if on index route React JS

本文关键字：JS 索引 路由 React 如果      更新时间：2023-09-26

使用反应路由器，并且当前仅在我在索引路由"/"和其他内容上时才尝试渲染一些内容。

这就是我到目前为止想出的，没有出现任何错误，但它似乎不能很好地与代码配合使用。

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

你做错了。您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。

相关文章：