[英]Custom Modal not rendering in Reactjs
我试图在我的代码中实现reactjs-popup ,但遇到了一个问题。 如下图所示,弹出窗口有效,但不显示任何内容。 我相信这是一个样式问题,因为 html 似乎可以正确渲染。 这是它工作的一个例子。
这是我的代码:
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}>
×
</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
任何人都可以帮忙吗?
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}>
×
</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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.