在 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 自身特性的最简单和最干净的方法.

优势:

1. 更干净、更简单
2. 每个模态实例都可以有自己的模态
3. 可以打开多个模态(甚至从模态内部)
4. 模态目标可以是动态的(就像模态内的模态)
5. 可以使用代码轻松控制多个模态.

更新:

为模态编写代码

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):<></>}

};导出默认模态；

I'm trying to call a Modal from non-related component (without using any parent-child relationship).

In order to do that I'm trying to use React Redux (as the only way I've seen that can make a connection between two unrelated components). An example on CodeSandbox shows the bare minimum of what I'm trying to do.

My issue is that I don't want to include <Modal> inside the <Button> render function. I want to be able to simply flip the flag in Button.js and <Modal> would appear. This is, from what I understand, is suppose to be one of the advantages of Redux.

It may be look unimportant, but besides the fact that I understand that this is something that can be done and so I want to know how, it will be useful for me in a different piece of code in which if I include <Modal> in the component's render function it'll render the Modal multiple times (I render that component in a list).

Edit:

Just to be clear (as per the example on CodeSandbox), I'm using React classes and not functional components; so no hooks like useDispatch but rather functions like mapDispatchToProps are the way I want to go here.

解决方案

I will Recommend using React Portal, this will inject it inside the given node, I found it to be the best solution for creating modals. I used same in dailylivedeals.com as a POC

import ReactDOM from "react-dom";

render() { 
    return ReactDOM.createPortal(
    this.props.children,
    Document.body
  );
}

This is the simplest and cleanest using React's own feature.

Advantage:

1. Cleaner and simpler
2. Each modal instance can have its own modal
3. Multiple modals can be opened ( even from inside a modal)
4. Modal target can be dynamic (like modal inside modal)
5. Multiple modal can be controlled using code easily.

Update :

Eloborate code for modal

import React, {useEffect, useState} from "react";
import ReactDOM from "react-dom";
import {Link} from 'react-router-dom';

import "./modal.scss";

let Modal = ({visible, id, hideModal, children, ...props}) => {

    let [show, setShow] = useState(false);

    useEffect(() => {
        setShow(visible);
        console.log(visible);
    }, [visible]);

    let toggleVisibility = () => {
        //hideModal();
        setShow(!show);
    }

    useEffect(() => {
        if (!show) {
            hideModal();
        }
    }, [show]);


    return <div className="modal-scratchpad">
        {show ?
            ReactDOM.createPortal(
                <div id={`${id}-modal-wrapper`} className="sample-modal-wrapper">
                    <div id={`${id}-modal-backdrop`} className="sample-modal-backdrop">
                    </div>
                    <div id={`${id}-modal-container`} className="sample-modal-container">
                        <div id={`${id}-modal`} className="sample-modal">
                            {children}
                            <div onClick={toggleVisibility} className="sample-modal-cross-button">{'\u2716'}</div>
                        </div>
                        <style type="text/css">
                            {"body {" +
                            "overflow:hidden" +
                            "}"}
                        </style>
                    </div>
                </div>
                , document.body)
            : <></>
        }
    </div>

};

export default Modal;

这篇关于在 React 中构建 Modal 组件而不将其嵌套在调用者组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！