如何使用 reactjs 和 react-router 实现正确的布局

Question

如何使用reactjs 和react-router 实现正确的布局。 基本上我想要实现的是如下图所示：

注意：我不想在index.html 中实现header & footer。

到目前为止，我所做和工作的是：

import React from 'react';
import { Router, Route, Link } from 'react-router'


class App extends React.Component {
    render(){
    return <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
          <li><Link to="/portfolio">Portfolio</Link></li>
          <li><Link to="/social">Social</Link></li>
          <li><Link to="/about">about</Link></li>
        </ul>
        {this.props.children}
      </div>
  }
}

class Home extends React.Component {
  render(){
    return <p>home</p>
  }
}

class Blog extends React.Component {
  render(){
    return <p>blog</p>
  }
}

class Portfolio extends React.Component {
  render(){
    return <p>portfolio</p>
  }
}

class Social extends React.Component {
  render(){
    return <p>social</p>
  }
}

class About extends React.Component {
  render(){
    return <p>about</p>
  }
}

let routes = <Router>
      <Route path="/" component={App}>
        <Route path="home" component={Home} />
        <Route path="blog" component={Blog} />
        <Route path="portfolio" component={Portfolio} />
        <Route path="social" component={Social} />
        <Route path="about" component={About} />
      </Route>
    </Router>

React.render(routes, document.body);

上面的代码可以正常工作，但我需要将应用程序分成 3 个组件 - > <Header />、content 和 <Footer />

类似：

class App extends React.Component {
  render(){
    return <Header />
           {this.props.children}
           <Footer />
  }
}

class Footer extends React.Component {
  render(){
    return <div>Footer</div>
  }
}


class Header extends React.Component {
  render(){
    return <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
          <li><Link to="/portfolio">Portfolio</Link></li>
          <li><Link to="/social">Social</Link></li>
          <li><Link to="/about">about</Link></li>
        </ul>
      </div>
  }
}

但是当我实现它时，路由不起作用并且我没有收到任何错误，我认为这与{this.props.children} 有关，所以.. 知道如何完成它吗？

Answer 1

您的渲染函数转换为：

function render() {
  return React.createElement(Header, null);
  {
    this.props.children;
  }
  React.createElement(Footer, null);
}

您没有看到任何错误，因为这是有效的，但有无法访问的代码。它只返回一个Header 元素。

您需要将其内容包装在另一个元素中，例如：

class App extends React.Component {
  render() {
    return <div>
      <Header/>
      {this.props.children}
      <Footer/>
    </div>
  }
}

---

编辑：假设你在 React 上下文之外编写了这段代码——你希望它返回什么？

function render() {
  return 'Header';
         'Content';
         'Footer';
}

这是 3 个单独的语句，由于第一个语句是 return，因此后两个是无关紧要的，因为它们永远无法到达。

为了从一个函数返回多个对象，您需要将它们放在某种容器中，例如一个数组：

function render() {
  return [
    'Header',
    'Content',
    'Footer'
  ]
}

但是，您不能在 React 组件的 render() 方法中执行此操作，如 they must return either a React component, null, or false，因此如果要返回多个项目，则需要使用另一个元素包装内容。