React hook:如何从React中的另一个组件调用Modal组件

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

你需要在app.js中添加一个函数来处理按钮的点击，所以这个函数会将状态show更改为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>
);
}

导出默认herslider;

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，因为状态经常变化，你会影响性能。

Answer 2

你需要将状态提取到应用级别，这样它就可以被组件共享。你可以用useState或者context &定制挂钩，如果你想让它非常干净。但是要先使用useState。

HeroSlider应该在它的props中接收modalShow函数。Modal.js应该以props的形式接收show状态。