react for循环_5个很棒的 React.js 库,值得你亲手试试!
React在过去几年变得越来越受欢迎。随之而来的是越来越多的库的发布,给我们带来了新的可能性,但最重要的是让开发这工作变得越来越简单。
在本文中,介绍 5 个 React 库,希望能给你带来一些帮助。
1. react-portal
我认为React中的 Portals(传送门) 对大多数人来说都很熟悉,即使它们很少被使用。下面是 Reac t文档中对它们的描述:
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
通常,我们的整个 React 应用程序都是在HTML中的一个 DOM 节点中渲染的。但是通过portals,我们可以定义附加的节点,在这些节点上我们可以挂载应用程序的各个部分,例如单个独立的组件。
然而,在官方文档中,门户以一种相当麻烦和复杂的方式进行描述,这就是也 react-portal
出现的一个原因。
现在是 react-portal 用法:
import { Portal } from ‘react-portal’document && document.getElementById(‘portal’)}>
This is portaled into the portal div!
只需使用 选择器(如getElementById
)将HTML代码中的portal
容器作为目标,就可以了。
在React.js应用程序的public/index.html
文件中:
<div id=”root”>div><div id=”portal”>div>
如上所见,每个React应用程序所需的根元素都像往常一样存在,使用了portal
我们就可以将元素指定到与根同级的位置。
当然,我们也可以动态切换portal
{this.state.show ? ( <Portal node={document && document.getElementById(‘portal’)}> <p>Portal contentp>Portal>) : null}
2. react-toastify
在现代web开发中,为终端用户提供动态信息是绝对必要的。不幸的是,JavaScript 中的alert()
函数不是实现此目的的好选择,这一点大家都很清楚,所以才会出现各种各样的 UI 库。
这里介绍一个 React 提示插件 react-toastify ,它是一个很小且可自定义的库,以下是官方给出的事例:
用法如下:
import { ToastContainer, toast } from 'react-toastify'import 'react-toastify/dist/ReactToastify.css'toast.configure({ autoClose: 2000, draggable: false, position: toast.POSITION.TOP_LEFT})const notify = () => toast('Wow so easy !')
const App = () => ( <div className="App"><button onClick={notify}>Notify !button>div>)
一步一步说下:
首先导入库本身,但重要的是随后导入所需的CSS。
然后配置
toast
,autoClose
的意思是toast
过了多长时间就会自动消失。通过使用
toast()
函数,就可以让toast
出现。
更酷的功能
我们还可以在toast
中放入JSX:const notify = () => toast(
Big Text
)
。
autoClose
可以替换为false
,因此它永远不会自动关闭。
3. react-contextmenu
很难想象没有上下文菜单的应用,这在网站上也是很不寻常。这不再是因为越来越多的Web应用程序接近真实的桌面应用程序,而这些应用程序通常已经提供了类似的良好性能和许多功能,而这些功能是我们多年前从未期望过的。
这些功能之一是用户对右键单击的评估,这种评估在网站上越来越多地使用。当然,那些是带有许多UI元素的更复杂的控件。
通常用于显示所谓的上下文菜单,为此目的,有一个非常方便的React.js库。用法如下:
import React from 'react'import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu'
const App = () => ( <React.Fragment><ContextMenuTrigger id="TriggerID"> {/* ID for every instance must be individual */} <p>Right click on me!p>ContextMenuTrigger><ContextMenu id="MenuID"><MenuItem onClick={() => alert('first ')}><button>1. Itembutton>MenuItem><MenuItem onClick={() => alert('second')}><button>2. Itembutton>MenuItem>ContextMenu>React.Fragment>)export default App
是我们需要右键单击以切换菜单的组件。菜单本身是在包装器中定义的。对于每个项,都有一个组件,我们可以给它一个onClick
事件来处理我们的用户输入。
4. react-lazy-load-image-component
在我们的网站上展示大量的图片需要一段时间。通常,已加载和突然出现的图片会导致用户对UI产生不愉快的体验,当然我们希望避免这种情况。
一个为用户优化有关图像的所有功能的强大库是response-lazy-load-image-component。我们不仅可以创建一个良好的模糊效果,就像我下面的例子,以桥梁加载的图像,但我们也可以延迟加载图像。这可以在下面的官方示例中看到:
5. react-onclickoutside
用户界面设计的一个重要规则是,认真评估尽可能多的用户输入。每个人都应该清楚这一点,但是有时可能很难将这样的东西实现为代码。
一个可以想象的例子是用户折叠的菜单。如果你想再次关闭它,90%
的用户倾向于简单地点击网站的死区(即那些本身不会产生反应的元素)。在几乎所有的专业网站上,这是完全相同的。要关闭菜单,只需再次单击它的旁边,而不是直接在它上切换。
有一个库可以满足这类的操作,它就是response-onclickoutside,它允许我们处理实际元素之外的单击事件。
在下面的示例中,你可以看到我们如何为一个简单的h1
和button
实现此功能。仅当单击除这两个之外的任何内容时,console.log
才会输出。处理此事件的函数必须调用handleClickOutside
。
import React, { Component } from 'react'import onClickOutside from 'react-onclickoutside'
class App extends Component { handleClickOutside = evt => { console.log('You clicked outside!') }
render() { return ( <div><h1>Click outside!h1><button>Don't click me!button>div> ) }}
export default onClickOutside(App)
总结
希望对您有所帮助。谢谢阅读!
作者:Louis Petrik 译者:前端小智 来源:medium
来源:https://webdevhub.net/articles/javascriptmedium/5-awesome-reactjs-libraries-you-should-know-about
交流
「每日挑战 16」纯CSS3水波动画特效
通过几个事例,就可以说明 for...of 循环在 JS 是不可或缺
2020年面向前端开发人员的10个很棒的 JS 库
「每日挑战 13」纯CSS实现新拟物炫酷时钟
这三个精巧且很棒JS库,值得你亲手试试
这些优化技巧可以避免我们在JS中过多的使用IF语句
适合前端开和UI设计的20多个最佳ICON库
27个CSS面试的高频考点助力金三银四
react for循环_5个很棒的 React.js 库,值得你亲手试试!相关推荐
- 模糊选择器 js_5个很棒的 React.js 库,值得你亲手试试!
React在过去几年变得越来越受欢迎.随之而来的是越来越多的库的发布,给我们带来了新的可能性,但最重要的是让开发这工作变得越来越简单. 在本文中,介绍 5 个 React 库,希望能给你带来一些帮助. ...
- Github上8个很棒的React项目
大家好,我是若川.持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列 ...
- 一份很棒的外设驱动库!(基于STM32F4)
关注.星标公众号,直达精彩内容 来源:https://www.lmlphp.com/user/1774/article/item/19294/ 编辑整理:技术让梦想更伟大 | 李肖遥 本次分享一份基于 ...
- 终端软件升级功能开发_5个很棒的终端技巧可帮助您升级为开发人员
终端软件升级功能开发 There are plenty of beginner tutorials around that help you learn command line basics, su ...
- 蜗牛机器i211网卡驱动_5个很棒的蜗牛邮件驱动的艺术项目
蜗牛机器i211网卡驱动 The Internet has made it possible for artists to spread their work to huge, world wide ...
- 我从未看过荒原写作背景_5种您从未听说过的很棒的Mozilla新技术
我从未看过荒原写作背景 My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my p ...
- javascript 库_您应该在2020年尝试的10个很棒JavaScript库
javascript 库 JavaScript is one of the most popular languages on the web. Even though it was initiall ...
- 很棒的 Django 应用程序、项目和资源的精选表单
目录 管理界面 分析 资产管理 验证 授权 博客管理 样板 缓存 兼容性 客户关系管理 仪表盘 数据科学 数据库 调试 电子邮件 字段 文件传输 形式 地理信息系统 图像处理 进出口 迁移 移动支持 ...
- python交互式编程入门先学什么_为什么 Python 对于编程入门学习来说,是一门很棒的语言...
在这篇文章里,我会来阐述下为什么我觉得 Python 对于计算机编程入门教学来说是一门很棒的编程语言(对基础编程课程更多观点可以查看这篇文章).这也是从我针对初学者Python 编程教学过程中获得并总 ...
最新文章
- session很快失效_一口气说出 4 种分布式一致性 Session 实现方式,面试杠杠的~
- 电脑pin重置_如果忘记了如何重置Windows PIN
- AtCoder Regular Contest 064
- BaseYii_autoload
- 求“厉害”数 (10 分)
- c mysql 包含字符串_Mysql字符串字段判断是否包含某个字符串的2种方法
- 2017云计算与IT风向标-------- 移动、转型、整合
- 尝试在RHEL6安装Wordpress —— 接触LAMP
- python给用户打标签_用户画像—打用户行为标签
- 群晖3617可以有几个网卡_一步到位,购入群晖920+和它的小伙伴们
- 计算机桌面颜色如何设置标准,教你把电脑屏幕设置成可以保护眼睛的颜色
- 论文阅读:CCX-RAYNET: A CLASS CONDITIONED CONVOLUTIONAL NEURAL NETWORK FOR BIPLANAR X-RAYS TO CT VOLUME
- 银河麒麟4.0.2安装
- HTML超链接基本属性
- JAVA实验三(南邮)
- 【开源】.net微服务开发引擎Anno 让复杂的事简单点- 日志、链路追踪一目了然 (上)
- 随便输入两个单词,两个单词之间以空格隔开,输出时每个单词的首字母变为大写。如输入:“hello java”,输出为“Hello Java”
- js获取一段时间内工作日的天数
- 【Android】【自动填充】自定义AutofillService(二):编写AutofillService代码
- 怎么给网页中的Flash上加超连接
热门文章
- C#中类的默认访问是私有的
- tomcat中三种部署项目的方法(转)
- python中类的构成_Python中类型关系和继承关系实例详解
- 计算机毕业设计中用python神经网络编程实现手写数字识别
- java苹果沙盒验证参数问题_php – iOS7 – 收据未在沙盒验证 – 错误21002(java.lang.IllegalArgumentException)...
- UI(用户界面)设计规则和规范
- C++ Vectors
- mysql简介博客_mysql简介
- VMWare——window server 2008/2012 administrator 密码忘记,设置重置密码
- ELK实践(二):收集Nginx日志