Javascript React组件之间的通信

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

像这样,

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

render（）{
返回(
);
}

我想当有人点击HeaderComponent中的链接时显示about组件。并隐藏mainhero组件。如何在React中的组件之间进行这种通信？可能吗

---

感谢使用

React Router

并为此场景创建

路由

，而不是组件之间的直接通信。使用react路由器的示例应用程序结构

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)

const App=React.createClass({
render（）{
返回(
应用程序
)
}
})
渲染((
)，document.body）

---

有关路由器的更多详细信息，请参阅：

Aditya的答案可能是一个更好的解决方案，但如果您真的想按自己的方式使用，可以使用状态和回调

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHero: true
    };
    this.toggleShowHero = this.toggleShowHero.bind(this);
  }
  toggleShowHero() {
    this.setState({
      showHero: !this.state.showHero
    });
  }
  render() {
    return (
      <div className="index">
        <HeaderComponent onClick={toggleShowHero}/>
        {
          this.state.showHero ? 
            <MainHeroComponent /> :
            <AboutComponent />
        }
      </div>
    );
}

类索引扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
真人秀英雄
};
this.toggleShowHero=this.toggleShowHero.bind（this）；
}
toggleShowHero（）{
这是我的国家({
showHero:！this.state.showHero
});
}
render（）{
返回(
{
这个，州，秀英雄？
:
}
);
}

有多种方法可以实现这一点，包括React路由器和Redux，但由于您是React新手，最好先熟悉基本知识。首先，您必须更改主组件的状态，以决定要渲染哪个子组件

在发布的主组件代码段中，按如下方式初始化构造函数中的状态：

/* in the main component */
constructor(props) {
  super(props);
  this.state = {
    showAbout: true
  };
}

/* in HeaderComponent */
showAbout () {
  let mainComponent = this.props.mainComponent;
  mainComponent.setState({
    showAbout: true   
  )};
}

然后按如下所示修改渲染函数，将对主组件的引用向下传递到标头组件：

/* in the main component */
<HeaderComponent mainComponent={this}/>

/* in the main component */
render () {
  let mainHeroComponent, aboutComponent;
  if (this.state.showAbout) {
    aboutComponent = (
      <AboutComponent/>
    );
  } else {
    mainHeroComponent = (
      <MainHeroComponent/>
    );
  }

  return (
    <div className="index">
      <HeaderComponent mainComponent={this}/>
      {mainHeroComponent}
      {aboutComponent} 
    </div>
  );
}

最后，回到主组件的渲染函数：

/* in the main component */
<HeaderComponent mainComponent={this}/>

/* in the main component */
render () {
  let mainHeroComponent, aboutComponent;
  if (this.state.showAbout) {
    aboutComponent = (
      <AboutComponent/>
    );
  } else {
    mainHeroComponent = (
      <MainHeroComponent/>
    );
  }

  return (
    <div className="index">
      <HeaderComponent mainComponent={this}/>
      {mainHeroComponent}
      {aboutComponent} 
    </div>
  );
}

主组件中的

/**/
渲染（）{
让mainHeroComponent，大约component；
if（this.state.showAbout）{
关于组件=(
);
}否则{
主组件=(
);
}
返回(
{mainHeroComponent}
{aboutComponent}
);
}

完成了！基本上，组件的状态每次更改都会重新渲染。因此，每次单击链接时，主组件的状态都会更改为新值showAbout。这将导致主组件重新渲染自身，并根据showAbout的值决定是渲染MainHeroComponent还是渲染AboUT组件

---

但是你应该确保你也有一个类似的逻辑来显示MainHeroComponent，而不是AboutComponent，只是为了切换视图。

道具和回调可以帮你做到：）为什么你要传递整个组件而不是回调？我认为这是反模式的。因为主组件的状态必须从HeaderComponent。使用这种非常粗糙的方法，如果不引用父组件，就无法从子组件更改其状态，是吗？您可以将一个函数传递给

HeaderComponent

，该函数引用了

main组件

。请参见我的答案：）是的，我想您是对的。这是一个有趣的p模式。我的缺点：）我认为使用React路由器比在组件之间通信更好：）我想避免使用React路由器，但考虑到它有多简单，我认为它是更好的选择。