javascript - 渲染 react 组件 onClick

Question

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

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

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

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