React hook：如何在反应中从另一个组件调用模态组件

Question

我正在尝试创建一个可以从多个组件重用/调用的模式。 我希望模态显示在 app.js 中，但按钮调用在另一个组件上。

一旦我能够实现一个，我可以在其他组件上按按钮并调用相同的模态，而不必为每个组件创建相同的模态

<div className="App">
      <HeroSlider />
      <HowItWorks />
      <Modal />
      <Footer />
    </div>

模态按钮位于此组件（HeroSlider）上。 单击后，它将调用模态组件并将其显示在 app.js 中

import React, { useState } from "react";
import Header from './Header'

function HeroSlider(props) {
    const [show, setShow] = useState(false);
    const modalShow = () => setShow(true);
    const openIsAccount = () => {

    }
    return (

 <div className="jumbotron" id="jumbotron2" >
<button type="button" className="btn btn-primary" id="shoutBtn" onClick={modalShow}><span>Get Started</span>
</button>
 </div>
    );
}

export default HeroSlider;

这是 Modal.js

const IsAccountOpen = (props) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Modal show={props.show} onHide={handleClose} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    I will not close 
                 </Modal.Body>
            </Modal>
        </>
    );

};

export default IsAccountOpen

Answer 1

您需要将 state 提取到 App 级别，以便可以将其共享给组件。 您可以使用 useState 执行此操作，或者如果您想让它非常干净，则可以使用上下文和自定义钩子。 但首先要使用 useState。

HeroSlider 应该在它的道具中收到 modalShow function。 Modal.js 应该接收 show state 作为道具。

Answer 2

You need to add a function in the app.js to handle the click on the button, so the function will change the state show to true, and you will pass the state to your modal, like this:

应用程序.js

[showState, setShowState] = useState(false)
buttonClickedHandler = () => {
   setShowState((showState) => showState = !showState )
}

<div className="App">
      <HeroSlider buttonClicked={buttonClickedHandler} />
      <HowItWorks />
      <Modal show={showState} buttonClicked={buttonClickedHandler} />
      <Footer />
</div>

HeroSlider.js

import React, { useState } from "react";
import Header from './Header'

function HeroSlider(props) {
    const [show, setShow] = useState(false);
    const modalShow = () => setShow(true);
    const openIsAccount = () => {

    }
    return (

 <div className="jumbotron" id="jumbotron2" >
<button type="button" className="btn btn-primary" id="shoutBtn" onClick={props.buttonClicked}><span>Get Started</span>
</button>
 </div>
    );
}

导出默认 HeroSlider；

IsAccountOpen.js

const IsAccountOpen = (props) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Modal show={props.show} onHide={props.buttonClicked} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    I will not close 
                 </Modal.Body>
            </Modal>
        </>
    );

};

export default IsAccountOpen

I think the best solution is to use redux , because you will need to access and update the state from different components, you shouldn't use context API because the state changes frequently and you will hit the performance.