c# 代码创建popup
如今,模态是React应用程序中最常用的组件之一,通过一种简单的方法来创建React Modals将帮助您在即将到来的React Applications中快速了解与Modals相关的功能。
在本教程中,我们将仅使用22行代码构建一个简单的React Modal。
下面的gif可以帮助您了解我们正在尝试构建的内容
![](https://i-blog.csdnimg.cn/blog_migrate/fafb0a593d24b21e433c363b2af7bda2.png)
开始吧
创建React项目
首先,使用create-react-app CLI创建一个简单的react项目。
$ npx Create-react-app SimpleModal
import React from "react" ;
import ReactDOM from "react-dom" ;
import "./styles.css" ;
function App () {
return (
< div className = "App" >
<h1>Create React Modal in X line of code </h1>
<button>Click Me</button>
</ div >
);
}
const rootElement = document .getElementById( "root" );
ReactDOM.render( < App /> , rootElement);
在本教程中,我们将使用react-popup软件包,它是一个简单而强大的react组件,具有很多优点:
- 模态,工具提示,菜单:多合一🏋️
- 全样式定制👌
- 用作子模式,可以控制代码中任何位置的弹出窗口。 💪
- IE支持。 🚀
- TypeScript支持👌
- 所有这些时钟的压缩时间约为3 kB。 ⚡️
该软件包可在npm存储库中以reactjs-popup的形式获得。 它将与所有流行的捆包机一起正常工作。
$ yarn add reactjs-popup
创建React模态
从reactjs-popup导入Popup
Component并开始使用它,如下所示。
将trigger
属性添加为简单的React Button元素,并将modal
属性设置为true。
import React from "react" ;
import ReactDOM from "react-dom" ;
import Popup from "reactjs-popup" ;
import "./styles.css" ;
function App () {
return (
< div className = "App" >
<h1>Create React Modal with 22 line of code </h1>
<Popup modal trigger={<button>Click Me</button>}>
Modal Content
</Popup>
</ div >
);
}
const rootElement = document .getElementById( "root" );
ReactDOM.render( < App /> , rootElement);
![](https://i-blog.csdnimg.cn/blog_migrate/f1150c8e8ba6ba1732722087265e914b.png)
定制和样式化React模式
我们需要为Modal Content组件创建一个Content.js
文件并添加一些样式
//content.js
import React from "react" ;
export default ({ close }) => (
< div className = "modal" >
<a className="close" onClick={close}>
×
</a>
<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 >
);
/* index.css */
.modal {
font-size : 12px ;
}
.modal > .header {
width : 100% ;
border-bottom : 1px solid gray;
font-size : 18px ;
text-align : center;
padding : 5px ;
}
.modal > .content {
width : 100% ;
padding : 10px 5px ;
}
.modal > .actions {
margin : auto;
}
.modal > .actions {
width : 100% ;
padding : 10px 5px ;
text-align : center;
}
.modal > .close {
cursor : pointer;
position : absolute;
display : block;
padding : 2px 5px ;
line-height : 20px ;
right : - 10px ;
top : - 10px ;
font-size : 24px ;
background : #ffffff ;
border-radius : 18px ;
border : 1px solid #cfcece ;
}
现在是时候进行一些魔术了
由于reactjs-popup
将子级作为函数模式提供,因此您可以完全控制Popup状态
我们将更新示例,以使用函数作为子函数而不是react元素来实现“关闭”按钮。
//index.js
import React from "react" ;
import ReactDOM from "react-dom" ;
import Popup from "reactjs-popup" ;
import Content from "./Content.js" ;
import "./styles.css" ;
function App () {
return (
< div className = "App" >
<h1>Create React Modal with 22 line of code </h1>
<Popup modal trigger={<button>Click Me</button>}>
{close => <Content close={close} />}
</Popup>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render( <App /> , rootElement);
最后结果
reactjs-popup: https ://react-popup.elazizi.com/
回购: https : //github.com/yjose/create-react-modal-with-22-line-of-code
Codesandbox: https ://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t
![](https://i-blog.csdnimg.cn/blog_migrate/2832927ff3c811a2217448190585c246.png)
确保访问react-popup主页
谢谢阅读! 如果您认为其他人应该阅读此帖子并使用此项目,则发送鸣叫并分享该帖子。
请记住跟着我,这样您就可以收到有关我以后的帖子的通知。
翻译自: https://hackernoon.com/create-react-modal-using-reactjs-popup-m24m231v1
c# 代码创建popup