React -管理组件中的引导模式
React -管理组件中的引导模式
提问于 2021-03-26 00:14:52
我有一个有4个屏幕/组件的ReactJS应用程序。每个屏幕都可以链接到另一个屏幕。
我想使用模态来显示每个屏幕的内容，这样我就不会丢失当前屏幕的状态。
现在我只在我的第一个组件上设置了Modal：
<Modal show={this.state.show}
ref={this.ModalGlobal}
onHide={() => this.setState({show: false})}
>
<Modal.Body>
{this.state.id &&
<MyComponentB id={this.state.id} />
}
</Modal.Body>
</Modal>在我的ComponentB上，我想用不同的ID打开相同的Modal。
我试图使用引用，但我不知道如何在我的ComponentB中使用它？
像这样：
this.ModalGlobal.current.destroy 我必须使用Redux吗?还是可以使用contexts或其他解决方案来完成？
回答 1
Stack Overflow用户
发布于 2021-03-26 01:08:02
有没有可能让一个模式关闭另一个模式，然后打开另一个模式，而让模式根据ID更新自己的内容呢？你可以为modal做一个包装器，它会根据当前的ID更新modal的主体。类似这样：
const MyModal = ({id}) => {
const [modalPage, setModalPage] = useState(id);
const [modalIsOpen, setModalIsOpen] = useState(false);
useEffect(() => {
setModalPage(id)
}, [id]);
const openModal = async () => {
setModalIsOpen(true);
document.body.style.overflowY = "hidden";
}
const closeModal = () => {
setModalIsOpen(false);
document.body.style.overflowY = "";
}
const modalPages = {
'welcome': <WelcomeComponent setModalPage />,
'products': <ProductsComponent setModalPage />,
'contact': <ContactComponent setModalPage />
}
const content = modalPages[modalPage];
return (
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
className="react-modal"
overlayClassName="react-modal-overlay"
>
{content}
</Modal>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66803505
复制相关文章
相似问题
腾讯云开发者
