单击按钮后组件不呈现

Question

I've got two components: button and progress bar. I would like to render the progress bar instead of the button once the button is clicked. Click is handled correctly, when I place the alert before the return it is displayed. Progress bar itself is rendered correctly as well. So it's only a problem with rendering it on button click. I am very new to React and I cannot see why my code doesn't work. Could you help me to understand the problem?

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    return (
      <Bar />
    )
  }

  render () {
    return (
      <Button onClick={this.handleClick}>
        Click!
      </Button>
    );
  }

}

class Bar extends React.Component {

  render () {
    return (
      <ProgressBar>
        Here the progress will be shown.
      </ProgressBar>
    );
  }
}

Answer 1

React will only render what's in the render functions, the fact that some random function happen to return a component has no impact as long as that component isn't a part of some component's render function.

You could solve this instead by having some state that determines if the Bar should render or not, and toggling that with the click.

Something along

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
    this.state = {loading: false}; {/* state we use whether to show bar or not */}
  }

  handleClick () {
    this.setState({loading: true}); {/* when button click we remember it */}
  }

  render () {
    if (this.state.loading) {
       return (
         <Bar /> {/* <-- here we have it inside the render function! */}
       );
    } else {
        return (
          <Button onClick={this.handleClick}>
            Click!
          </Button>
        );
     }
  }

}

Answer 2

Returning a JSX from a function would not magically render it! You need to somehow put that JSX somewhere in the render function.

Here is one way to do so:

class ProgressButton extends React.Component {
  constructor() {
    super();
    this.state = {
      showBar: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
   this.setState({ showBar: true });
  }

  render() {
    if (this.state.showBar) {
      return <Bar />;
    }
    return <Button onClick={this.handleClick}>Click!</Button>;
  }
}

Answer 3

You cannot update a view like this and it is against the rules. (As I am also a new ReactJS developer I have ongoing experience.)

1. Use a conditional render. For example https://reactjs.org/docs/conditional-rendering.html

2. Use a modal with the progress bar and display it on the button click action.

Answer 4

You cannot return components from normal functions,you can do the following way to render the progressbar

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
    this.state = {openBar:false}
  }

  handleClick () {
   this.setState({openBar:true})
  }

  render () {
    return (
      <div>
      <Button onClick={this.handleClick}>
        Click!
      </Button>
       {this.state.openBar &&<Bar/>}
      </div>
    );
  }

}

class Bar extends React.Component {

  render () {
    return (
      <ProgressBar>
        Here the progress will be shown.
      </ProgressBar>
    );
  }
}

Answer 5

That just won't work. You could try something like this

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.state = {
        showBar : false;
    }
  }

  handleClick = () => {
    this.setState({showBar: true});
  }

  render () {
    var { showBar } = this.state;
    return (
      <React.Fragment>
          <Button onClick={this.handleClick}>
            Click!
          </Button>
          {showBar && <Bar/>}
      </React.Fragment>
    );
  }

}

class Bar extends React.Component {

  render () {
    return (
      <ProgressBar>
        Here the progress will be shown.
      </ProgressBar>
    );
  }
}