定义反应中条件组件的正确方法

Question

我不确定是否使用正确的方法来定义条件组件，下面是代码，请帮助我

我正在调用IIFE，该IIFE将在每次状态更改时进行评估，我不知道我是否在做创建此类组件的标准方法

我有不同的按钮可以打开不同的对话框，因此要重用我使用此方法的代码，以便在每种不同的条件下，打开不同的对话框内容，并且我的状态位于其他组件中，请在dialogcomp.js中说。帮助我介绍创建此类组件的方法和方式

  

dialogcomp.js

<DialogComp handleClose={this.handleClose} {...this.state} loader={loader} >
  {(() => {
    switch (this.state.dialog) {
        case "case1": return <comp1 list=list} />;
        case "case2": return <comp2 list={list2}/>;
        default: return null;
    }
  })()}
</DialogComp>

  

dialogcont.js

const Dialog = (props) => {

return (
    <DialogComp open={props.open} onClose={props.handleClose} aria- 
           labelledby="form-dialog-title" fullScreen>
      <AppBar className="position-relative">
          <Toolbar>
              <IconButton onClick={props.handleClose} aria-label="Close">
                  <CloseIcon />
              </IconButton>
               <Typography
                    type="title"
                    color="inherit"
                    style={{
                        flex: 1
                    }}
                >
               {props.dialog ? props.dialog.toString().replace(/\_/g,' ') : `-`} 
        </Typography>
      </Toolbar>
    </AppBar>

    <DialogContent className="pt-3">
            {props.loader ? `Loading` : props.children}
    </DialogContent>
   </DialogComp>
);
};