Question

我正在尝试根据页面的阶段场景渲染特定的组件。我正在使用可变的“ transitComponent”来呈现三个组件之一-接收到响应后的循环进度（等待）或两个按钮之一。

有什么建议吗？

render() {
const { classes } = this.props;
if (this.state.stage==1){ transitComponent = CircularProgress};
if (this.state.stage==2){ transitComponent = CancelButton };
if (this.state.stage==3){ transitComponent = OKButton };
return (
  <div align="center">
    <br />
    <Button align="center" variant="contained" color="primary" onClick=    {this.handleOpen}>Create Profile</Button>
    <Modal aria-labelledby="simple-modal-title" aria-describedby="simple-    modal-description" open={this.state.open} onClose={this.handleClose}>
      <div style={getModalStyle()} className={classes.paper}>
        <Typography variant="title" id="modal-title" align="center">
          {this.state.message}
        </Typography>
        {transitComponent}
      </div>
    </Modal>
  </div>
    );
  }

Answer 1

您要根据当前CircularProgress将CancelButton，OKButton或transitComponent分配给临时变量state.stage。没关系，唯一出错的地方就是如何渲染该组件。

由于transitComponent是与其他组件一样的组件，因此您不必使用花括号将其呈现，而是作为组件使用，因此<transitComponent />将是正确的方法。

另一件事：由于React命名约定要求您使用大写字母命名组件，因此应将其命名为TransitComponent，并将其呈现为<TransitComponent />。

别忘了用TransitComponent语句声明let！

更新的代码示例：

render() {
  const { classes } = this.props;
  let TransitComponent;
  if (this.state.stage==1){ TransitComponent = CircularProgress};
  if (this.state.stage==2){ TransitComponent = CancelButton };
  if (this.state.stage==3){ TransitComponent = OKButton };
  return (
    <div align="center">
      <br />
      <Button align="center" variant="contained" color="primary" onClick={this.handleOpen}>Create Profile</Button>
      <Modal aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" open={this.state.open} onClose={this.handleClose}>
        <div style={getModalStyle()} className={classes.paper}>
          <Typography variant="title" id="modal-title" align="center">
            {this.state.message}
          </Typography>
          <TransitComponent />
        </div>
      </Modal>
    </div>
  );
}

ReactJS-根据场景渲染一个特定的组件

1 个答案: