如何在屏幕加载时首先加载模态

Question

我有一个名为Modal.js一个模态分量，并呼吁Apps.js主要页面组件。 我想要实现的是，当我导航到Apps.js ，如何modal box in modal.js加载modal box in modal.js 。 即我想先在我的Apps.js组件中调用Apps.js组件。 一旦任何用户尝试加载页面Apps.js ，模式框应该触发并弹出。 我如何实现这一目标？

PS：React的新手

Modal.Js

function Transition(props) {
   return <Slide direction="up" {...props} />;
}

export default class AlertDialogSlide extends React.Component {

   state = {
      open: false,
   };

   handleClose = () => {
      this.setState({ open: false });
   };

   render() {
      return (
         <div>
            <Dialog
               open={this.state.open}
               TransitionComponent={Transition}
               keepMounted
               onClose={this.handleClose}
               aria-labelledby="alert-dialog-slide-title"
               aria-describedby="alert-dialog-slide-description"
            >
               <DialogTitle id="alert-dialog-slide-title">

               </DialogTitle>
               <DialogContent>
               </DialogContent>

            </Dialog>
         </div>
      );
   }
}

Apps.JS

class Carts extends Component {

 componentDidMount(){

 }

图片

Answer 1

你可以通过道具传递你的开放状态。

您可以在模式文件中执行以下代码：

componentDidMount () {
    this.setState({open: this.props.modalOpen})
}

然后进入你的App.js或其他文件，你只需：

<AlertDialogSlide modalOpen={true} />