Question

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

像这样，

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

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

由于

Answer 1

使用React-Router并为此方案创建routes，而不是组件之间的直接通信。使用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

Answer 2

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

Answer 3

有多种方法可以实现这一点，包括React-routers和Redux，但由于你是React的新手，如果你先熟悉基础知识，那将会很好。首先，您必须更改主要组件的状态以决定要呈现的子组件。

在您发布的主要组件代码段中，在构造函数中初始化状态，如下所示：

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

然后按如下方式修改渲染函数，将对主要组件的引用传递到标题组件：

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

然后，在HeaderComponent中，将click事件处理程序附加到要执行操作的链接。

/* in HeaderComponent */
<a href="#" ....... onClick={this.showAbout.bind(this)}>Show About</a>

在同一组件中，按如下方式定义showAbout函数：

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

最后，回到主要组件的渲染功能：

/* 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>
  );
}

你已经完成了！基本上，每次更改状态时都会重新呈现组件。因此，每次单击链接时，主组件的状态都会更改为 showAbout 的新值。这将导致主要组件重新呈现，并且，基于 showAbout 的值，它将决定是否呈现MainHeroComponent或AboutComponent。

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

在React组件之间进行通信

3 个答案: