通过<a>链接</a>渲染其他组件

Question

在下面的示例中，我有两个功能组件，它们给出了将页面分开的想法，但是，当然，它们仅显示不同颜色的<div>框。

const Home = () =>
    <div style={{background:'red', height: 100, width: 100}}></div>;

const About = () =>
    <div style={{background:'blue', height: 100, width: 100}}></div>;

现在，如果我想创建一个链接到网站某些部分的导航栏，请忽略<a>链接的可能错误使用，但是这表明我希望这些链接将网站的其他部分呈现为对单击Navbar选项的响应。

const Navbar = () =>
    <div>
        <a href='#'>Home</a>
        <a href='#'>About</a>
    </div>;

如果我有一个名为App的组件，可以为我呈现不同的页面：

const App = () =>
    <div>
        <Navbar />
        // Render current page here; default is the `Home` component.
    </div>;

ReactDOM.render(<App />, document.getElementById('app'));

如何通过单击Navbar栏中的链接或元素来主动更新App组件以呈现不同的页面？

编辑： Soviut和finalfreq ，谢谢您的回答！ 我来自Codecademy的ReactJS课程，因此，由于我不得不学习ES6并且对大多数JS库一无所知，因此很难过渡到Javascript和React的“真实世界”。 无论如何，我很感谢你们为我指明了react-router的方向， react-router了一个例子说明如何在没有它的情况下实现我的目标。 干杯。

Answer 1

这就是react-router功能。

虽然不建议手动执行此操作，但它可以通过发出单击事件来工作，这些事件会调用从包含“页面”的父组件传递到其中的回调函数。 该回调将告诉父容器单击了哪个导航链接，并将决定显示哪个页面以及停止渲染哪个页面。

Answer 2

在每个页面都没有路由器/控制器的情况下，您可以执行以下操作：

const pages = ['array', 'of', 'pages'];

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      activePage: pages[0]
    }
  }

  switchPage = (page) => {
    this.setState({
    activePage: page
    })
  }

  renderActivePage = () => {
    switch(this.state.activePage) {
      case 'home': 
        return <HomeComponent />
    }
  }
  render() {

    return (
      <div>
       <Navbar switchPageFunction={this.switchPage}/>
       {renderActivePage()}
       </div>;)
  }

}

然后只需将onclick设置为您的标签即可，实际上就是switchPageFunction并将页面名称作为参数传递。 然后，父组件将接收更新，更新其自己的状态，并渲染正确的组件。

我不建议使用此路由，而是会考虑专门为此用例构建的react-router