自定义模态未在 Reactjs 中呈现答案

【问题标题】：Custom Modal not rendering in Reactjs自定义模态未在 Reactjs 中呈现
【发布时间】：2021-04-18 17:27:59
【问题描述】：

我尝试在我的代码中实现reactjs-popup，但遇到了一个问题。如下图所示，弹出窗口有效，但不显示任何内容。我相信这是一个样式问题，因为 html 似乎可以正确呈现。 Here 是它工作的一个例子。

这是我的代码：

import React from 'react'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';


const Dog = () => {
return(
<div className="app-container">
                                                    <Popup 
                                                    trigger={
                                                        <a href="javascript:void(0)">
                                                            bob
                                                        </a>
                                                    } 
                                                    modal
                                                    nested
                                                    >

                                                     {close => (
                                                        <div className="modal">
                                                            <button className="close" onClick={close}>
                                                            &times;
                                                            </button>
                                                            <div className="header"> Modal Title </div>
                                                            <div className="content">
                                                            {' '}
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
                                                            Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
                                                            delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
                                                            <br />
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                                                            commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                                                            explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                                                            </div>
                                                            <div className="actions">
                                                            <button
                                                                className="button"
                                                                onClick={() => {
                                                                console.log('modal closed ');
                                                                close();
                                                                }}
                                                            >
                                                                close modal
                                                            </button>
                                                            </div>
                                                        </div>
                                                        )}
                                                    </Popup>
</div>
)
}

export default Dog

谁能帮忙？

【问题讨论】：

标签： javascript reactjs react-redux popup

【解决方案1】：

Remove className="modal"

import React from 'react'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';


const Dog = () => {
    return (
        <div className="app-container">
            <Popup
                trigger={
                    <a href="javascript:void(0)">
                        bob
                                                        </a>
                }
                modal
                nested
            >

                {close => (
                    <div className="">
                        <button className="close" onClick={close}>
                            &times;
                                                            </button>
                        <div className="header"> Modal Title </div>
                        <div className="content">
                            {' '}
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
                            Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
                            delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
                                                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                            commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                            explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                                                            </div>
                        <div className="actions">
                            <button
                                className="button"
                                onClick={() => {
                                    console.log('modal closed ');
                                    close();
                                }}
                            >
                                close modal
                                                            </button>
                        </div>
                    </div>
                )}
            </Popup>
        </div>
    )
}

export default Dog

【讨论】：