如何打開和關閉反應引導模式？

Question

我是新手，我正在使用 react-bootstrap。 我有一個完美工作的反應應用程序，它有 2 個組件，我正在使用 function 組件。 這是代碼。

應用程序.js

function App() {
  const [modalShow, setModalShow] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </>
  );
}

MyVerticallyCenteredModal.js

export default function MyVerticallyCenteredModal(props) {
    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Modal heading
            </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Centered Modal</h4>
                <p>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                    consectetur ac, vestibulum at eros.
            </p>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
}

在這個階段，我的代碼運行良好。 但我需要做一些改變。 我需要從MyVerticallyCenteredModal組件中刪除 show 和 onHide 道具，並從Modal組件中訪問道具。 這是我所做的，

應用程序.js

<MyVerticallyCenteredModal />

MyVerticallyCenteredModal.js

<Modal
  show={modalShow}
  onHide={() => setModalShow(false)}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
...
</Modal>

現在我得到一個編譯錯誤，

'modalShow' is not defined
'setModalShow' is not defined

但是如果不將 useState 從 App.js 移動到 MyVerticallyCenteredModal.js 我該怎么做呢？

Answer 1

onClick(); 應該采取一個事件來控制鼠標點擊：

 onClick={(e) => {setModalShow(false)}};

與 onHide(); 相同；

注意：您也可以使用單詞“event”而不是字母“e”

Answer 2

狀態由父組件<App/>控制，啟動Modal的button位於 App 組件中。

  <Button variant="primary" onClick={() => setModalShow(true)}>
    Launch vertically centered modal
  </Button>

因此，無法從 Modal 自身控制 Modal 行為。

但是，如果您直接在<App/>組件本身中渲染您的Modal ，而不使用父組件來渲染 Modal。 然后可以做到這一點。

我們將需要模態組件內的一個小按鈕，並在模態本身中使用 state 來控制它：）