在 reactjs 中檢查 cookie 后顯示引導模式（不使用 react-bootstrap 或類似的東西，只使用 cdn 引導）

Question

我想在網站加載后顯示模態並檢查cookie，如果cookie未設置顯示模態，如果cookie設置不顯示模態。 我使用引導模式而不是 react-bootstrap 或類似的東西，這就是我在 vanila javascript 和 html 中顯示模式的方式：

function checkCookie() {
    let tampil = (getCookie("janganTampil") === 'true');
    if (tampil != true) {
        checkbox.checked = false;
        myModal.show();
    } else {
        checkbox.checked = true;
    }
}

<body onload="checkCookie()">
    ...
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
       ...
    </div>
</body>

show()是來自引導程序的 function。 我嘗試在 react 上運行show()但出錯，因為 function 未知。 如何在反應中顯示模態？ 反應代碼：

應用程序

  const [isCookieSet, setIsCookieSet] = useState(false);
  function checkCookie() {
    let tampil = cookies.janganTampil === 'true';
    if (tampil) {
      setIsCookieSet(true);
    }
  }
  return (
    <div onLoad={checkCookie} className="App">
      ...
      <Modal isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} ></Modal>
    </div>
  );

模態

  return createPortal(
    <div className="modal fade" id="modal" tabIndex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        ...
    </div>, document.getElementById('popup')
  )

Answer 1

show() function 需要在模態實例上使用。 所以在你之后：

import { Modal } from "bootstrap";

你可以做類似的事情：

const openModal = () => {
    // There are other functions that might be more suitable
    // for your situation than getOrCreateInstance()
    // so I suggest you look into that.
    const modalInstance = Modal.getOrCreateInstance('#modal');
    modalInstance.show();
}

你究竟是如何實現的，如果不猜測你的代碼的 rest 是什么樣子，我就無法回答。

在 reactjs 中檢查 cookie 后顯示引導模式（不使用 react-bootstrap 或類似的東西，只使用 cdn 引導）

問題描述

1 個解決方案

解決方案1
0 2022-08-11 08:29:26

在 reactjs 中檢查 cookie 后顯示引導模式（不使用 react-bootstrap 或類似的東西，只使用 cdn 引導）

問題描述

1 個解決方案

解決方案1 0 2022-08-11 08:29:26

解決方案1
0 2022-08-11 08:29:26