javascript - React 组件之间的通信

Question

我是新手，所以这是我不知道的事情。在我的应用程序中我正在使用它，它有一个加载其他组件的主要组件。

像这样，

  render() {
    return (
      <div className="index">
        <HeaderComponent />
        <MainHeroComponent />
        <AboutComponent />
      </div>
    );
  }

我希望当有人单击 HeaderComponent 中的链接时显示 about 组件。并隐藏 MainHeroComponent。我怎样才能在React中的组件之间进行这样的通信？可以吗？

谢谢

Answer 1

使用React-Router并为此场景创建路由，而不是组件之间的直接通信。使用react-router的示例应用程序结构

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <HeaderComponent />
      </div>
    )
  }
})

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="hero" component={MainHeroComponent} />
      <Route path="about" component={AboutComponent} />
    </Route>
  </Router>
), document.body)

有关路由器的更多详细信息，请参阅:https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md