单击按钮时组件不呈现

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

Answer 2

您无法更新此类视图，这违反了规则。 （因为我也是一名新的ReactJS开发人员，我有持续的经验。）

1. 使用条件渲染。例如https://reactjs.org/docs/conditional-rendering.html
2. 使用带有进度条的模态并将其显示在按钮单击操作上。

Answer 3

React只会渲染渲染函数中的内容，只要该组件不是某个组件渲染函数的一部分，一些随机函数碰巧返回组件的事实就没有影响。

你可以通过一些确定Bar是否应该渲染的状态来解决这个问题，并通过点击切换它。

一些东西

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 4

您无法从正常函数返回组件，您可以通过以下方式呈现进度条

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

那是行不通的。你可以尝试这样的事情

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