在 React 中构建 Modal 组件而不将其嵌套在调用者组件中 [英] Building a Modal component in React without nesting it inside caller component
问题描述
我正在尝试从非相关组件调用一个 Modal(不使用任何父子关系).
为了做到这一点,我正在尝试使用 React Redux(这是我见过的可以在两个不相关组件之间建立连接的唯一方法).CodeSandbox 上的示例 显示了我正在尝试做的最起码的事情.
我的问题是我不想在 渲染函数中包含
.我希望能够简单地翻转 Button.js
中的标志,然后
就会出现.据我了解,这应该是 Redux 的优势之一.
这可能看起来不重要,但除此之外,我知道这是可以完成的事情,所以我想知道如何做,如果我在其中包含 <Modal>
在组件的渲染函数中,它将多次渲染 Modal(我在列表中渲染该组件).
为了清楚起见(根据 CodeSandbox 上的示例),我使用的是 React 类而不是函数式组件;所以没有像 useDispatch
这样的钩子,而是像 mapDispatchToProps
这样的函数是我想要的方式.
我会推荐使用 React Portal,这会将它注入给定节点中,我发现它是创建模态的最佳解决方案.我在dailylivedeals.com 中将其用作POC
从react-dom"导入 ReactDOM;使成为() {返回 ReactDOM.createPortal(this.props.children,文件体);}
这是使用 React 自身特性的最简单和最干净的方法.
优势:
- 更干净、更简单
- 每个模态实例都可以有自己的模态
- 可以打开多个模态(甚至从模态内部)
- 模态目标可以是动态的(就像模态内的模态)
- 可以使用代码轻松控制多个模态.
更新:
为模态编写代码
import React, {useEffect, useState} from "react";从react-dom"导入 ReactDOM;从 'react-router-dom' 导入 {Link};导入./modal.scss";让 Modal = ({visible, id, hideModal, children, ...props}) =>{让 [show, setShow] = useState(false);useEffect(() => {设置显示(可见);控制台日志(可见);}, [可见的]);让 toggleVisibility = () =>{//hideModal();setShow(!show);}useEffect(() => {如果(!显示){隐藏模态();}}, [表演]);return {表演 ?ReactDOM.createPortal(<div id={`${id}-modal-wrapper`} className=sample-modal-wrapper"><div id={`${id}-modal-backdrop`} className=sample-modal-backdrop"><div id={`${id}-modal-container`} className=sample-modal-container"><div id={`${id}-modal`} className=sample-modal">{孩子们}<div onClick={toggleVisibility} className=sample-modal-cross-button">{'\u2716'}</div>
<style type="text/css">{身体{"+溢出:隐藏"+"}"}</风格>
, 文档.body):<></>}