[英]How to load modal first when screen loads
I have a modal component called Modal.js and a main page component called Apps.js . 我有一个名为Modal.js一个模态分量,并呼吁Apps.js主要页面组件。 What i want to achieve is, how can i load the
modal box in modal.js
as i navigate in to Apps.js
. 我想要实现的是,当我导航到
Apps.js
,如何modal box in modal.js
加载modal box in modal.js
。 ie I want to call Modal.js component first in my Apps.js
component. 即我想先在我的
Apps.js
组件中调用Apps.js
组件。 The modal box should trigger and pop up once any user tries to load page Apps.js
. 一旦任何用户尝试加载页面
Apps.js
,模式框应该触发并弹出。 How do i achieve that ? 我如何实现这一目标?
PS: New to React PS:React的新手
Modal.Js 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 Apps.JS
class Carts extends Component {
componentDidMount(){
}
} Image 图片
You can pass your open state via props. 你可以通过道具传递你的开放状态。
You can do the following code into your modal file: 您可以在模式文件中执行以下代码:
componentDidMount () {
this.setState({open: this.props.modalOpen})
}
Then into your App.js or another file, you just do: 然后进入你的App.js或其他文件,你只需:
<AlertDialogSlide modalOpen={true} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.