onClick 渲染反应组件

Question

我对反应非常陌生，但对其潜力感到兴奋。仍在掌握这一切的基础知识，因此任何解释将不胜感激。

我希望在用户单击“导航”组件中的按钮时呈现“关于”组件（目的是稍后切换此组件）。

我试图用我能想到的最简单的方式来做这件事，但这显然是非常错误的：

class Nav extends React.Component {

 renderAbout() {
  return (
   <About />
 );
 }

render() {
 return (
  <div className="Nav">
    <div className="Button-Container">
    <div className="Nav-Text About-Button">
      <h2 onClick={() => this.renderAbout()}>About</h2>
    </div>
    </div>
  </div>
  );
 }
}

这是否与更新“关于”组件的“状态”有关？

提前致谢。

Answer 1

您可以使用状态来定义是否About必须渲染导入的组件。

class Nav extends React.Component {

  state = {
    isAboutVisible: false,
  }

  render() {
   return (
    <div className="Nav">
      <div className="Button-Container">
      <div className="Nav-Text About-Button">
        <h2 onClick={() => this.setState({ isAboutVisible: true }) }>About</h2>
      </div>
      </div>
      { this.state.isAboutVisible ? <About /> : null }
    </div>
    );
   }
}