渲染反应组件onClick

Question

I'm super new to react but excited about its potential. Still getting to grips with the fundamentals of it all so any explanation would be greatly appreciated.

I'm looking to render an 'About' component as the user clicks a button in the 'Nav' component (with the aim to toggle this later down the line).

I've attempted to do it in the simplest way I can think of, but this is obviously very wrong:

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

Would this have something to do with updating the 'state' of the About component?

Thanks in advance.

Answer 1

You can use state to define if imported component About has to be rendered or not.

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

Yes, you have to change state of the component. Changing the state will automatically rerender your component. In your example it should be something like:

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

You could also consider using for example this package: https://www.npmjs.com/package/react-conditions

Also, remember that there is a rule that each method which listen for an event should start with the "handle" word. Like in may example.

Answer 3

You currently do not have "About" component in actual view, you just render it somewhere out there, in the void!

To properly render a component you have to specify its place in JSX expression. Also, as one of the easiest solutions) you probably want to toggle it. So that translates to something like this:

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