React hook：如何在 React 中从另一个组件调用 Modal 组件

Question

我正在尝试创建一个我可以 reuse/call 来自多个组件的模式。我希望模式显示在 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

您需要将状态提取到应用程序级别，以便可以将其共享给组件。您可以使用 useState 来执行此操作，或者如果您想让它非常干净，则可以使用上下文和自定义挂钩。但是先用 useState 做。

HeroSlider 应该在其道具中接收 modalShow 功能。 Modal.js 应该接收显示状态作为道具。

Answer 2

您需要在 app.js 中添加一个函数来处理按钮的点击，因此该函数会将状态显示更改为 true，并且您会将状态传递给您的模式，如下所示：

App.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

我认为最好的解决方案是使用 redux，因为你需要从不同的组件访问和更新状态，你不应该使用上下文 API因为状态经常变化，你会影响性能。

React hook：如何在 React 中从另一个组件调用 Modal 组件

React hook: How to call Modal component from another component in react

javascript

modal-dialog

reactjs

react-hooks