javascript - 单击按钮时组件不会呈现

Question

我有两个组件:按钮和进度条。我想在单击按钮后渲染进度条而不是按钮。当我在返回之前放置警报时，单击会被正确处理。进度条本身也可以正确呈现。所以这只是在单击按钮时渲染它的问题。我对 React 很陌生，我不明白为什么我的代码不起作用。你能帮我理解这个问题吗？

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

从函数返回 JSX 不会神奇地渲染它!您需要以某种方式将该 JSX 放在 render 函数中的某个位置。

这是一种方法:

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