如何在页面首次加载时触发模式/弹出窗口 - React

Question

当用户进入页面时，我希望首先弹出一个模式，并带有在USER和AGENT之间进行选择的选项，并且基于该页面内容将被更新。

首先，我需要弄清楚如何在页面加载时触发模态并将选择的选项保存到 cookie / localStorage。

我知道有一个 JavaScript function，是这样的：

$(document).ready(function() {
  setTimeout(function() {
    $("#myModal").modal('show');
  }, 2000);

});

当用户在页面上停留 2 秒时，上面的代码 ^ 将触发模式，我想通过反应实现相同的逻辑 - 考虑useEffect可以处理吗？

另外，我正在使用 React Bootstrap，我知道该组件具有一些功能，例如onEnter function，但我不确定它是否可用？

我现在使用的 React Modal 由按钮触发：

const [show, setShow] = useState(false); // trigger

        <Button variant="primary" onClick={() => setShow(true)}>
            Custom Width Modal
        </Button>

模态本身：

            <Modal
                show={show}
                onHide={() => setShow(false)}
                dialogClassName="modal-90w"
                aria-labelledby="contained-modal-title-vcenter"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Lorem Ipsum Dolor
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row className="text-center justify-content-center">
                        <Col>
                            <Button>USER</Button>
                        </Col>
                        <Col>
                            <Button>AGENT</Button>
                        </Col>
                    </Row>
                </Modal.Body>
            </Modal>

Answer 1

既然您说您希望弹出窗口首先显示，您只需简单地更改它

const [show, setShow] = useState(true)

Answer 2

尝试这个

使用第二个参数作为空列表的 useEffect() 只会在安装组件时调用一次。 您还可以在调用setShow之前检查 cookie。

下面的代码还增加了 2 秒的延迟。

useEffect(()=>{
  setTimeout(()=>{
    setShow(true)
  }, 2000)
}, [])