如何在頁面首次加載時觸發模式/彈出窗口 - 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)
}, [])