Question

我是最新的反应，但对其潜力感到兴奋。仍然要掌握它的基本原理所以任何解释都会非常感激。

我正在寻找一个关于＆＃39;关于＆＃39;用户单击“导航”按钮时的组件。组件（旨在稍后将其切换到该行）。

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

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

您可以使用state来定义是否必须渲染导入的组件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>
    );
   }
}

Answer 2

是的，您必须更改组件的状态。更改状态将自动重新呈现组件。在您的示例中，它应该是：

class Nav extends React.Component {

 state = {
   showAbout: false; // initial state
 }

 renderAbout = () => {
  if (!this.state.showAbout) return '';

return (
   <About />
 );
 }

// ES6 priavte method syntax
handleButtonClick = () => {
 this.setState({showAbout: true});
}

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

您还可以考虑使用此程序包：https://www.npmjs.com/package/react-conditions

另外，请记住，每个监听事件的方法都应该以＆＃34; handle＆＃34;字。就像在可能的例子中一样。

Answer 3

您目前没有＆＃34;关于＆＃34;实际视图中的组件，你只需将它呈现在那里，在虚空中！

要正确渲染组件，您必须在JSX表达式中指定其位置。此外，作为最简单的解决方案之一，您可能想要切换它。所以转换成这样的东西：

 constructor(props){
     super(props)
     this.state={toggle:false}
 }

renderAbout(toggle) {
 if(toggle)
   return <About />
 else return null;
}

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

渲染反应组件onClick

3 个答案: