屏幕加载时如何先加载模式

Question

我有一个名为 Modal.js 的模式组件和一个名为 Apps.js 的主页组件。我要实现的是，在导航到modal box in modal.js时如何加载Apps.js。即我想在我的Apps.js组件中首先调用Modal.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} />