ページのステージシナリオに基づいて特定のコンポーネントをレンダリングしようとしています。可変の「transitComponent」を使用して、3つのコンポーネントの1つをレンダリングしています。循環進行（待機）または応答が受信されたら2つのボタンの1つです。
助言がありますか？
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>
);
}
現在のに応じてCircularProgress、CancelButtonまたはOKButton一時変数transitComponentに割り当てていstate.stageます。それは大丈夫です、あなたが間違えた唯一の部分はあなたがそのコンポーネントをどのようにレンダリングするかです。
以来transitComponent、他の同様の成分である、あなたは、中括弧でそれをレンダリングしませんが、コンポーネントとして、その<transitComponent />適切な方法だろう。
もう1つ：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>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加