import { Portal } from ‘react-portal’ 
  
  
  
  
 
  
  
  
  
  
This is portaled into the portal div!
 
  
  
  
  
 
 
 
 

 
 
 
 
  
  
  
  
{this.state.show ? ( 
  
  
  
  
      
  
  
  
  
    
Portal content
 
  
  
  
  
   
  
  
  
  
) : null} 
 
 
 

 
 
 
 
  
  
  
  
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 = () => ( 
  
  
  
  
   
  
  
  
  
    Notify ! 
  
  
  
  
  

一步一步说下：

• 首先导入库本身，但重要的是随后导入所需的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 = () => ( 
  
  
  
  
     
  
  
  
  
         {/* ID for every instance must be individual */}  
  
  
  
  
            
Right click on me!
 
  
  
  
  
         
  
  
  
  
 
  
  
  
  
         
  
  
  
  
             alert('first ')}> 
  
  
  
  
                1. Item 
  
  
  
  
             
  
  
  
  
 
  
  
  
  
             alert('second')}> 
  
  
  
  
                2. Item 
  
  
  
  
             
  
  
  
  
         
  
  
  
  
     
  
  
  
  
) 
  
  
  
  
 
  
  
  
  
export default App 
 
 
 

< ContextMenuTrigger>是我们需要右键单击以切换菜单的组件。菜单本身是在 包装器中定义的。对于每个项，都有一个 组件，我们可以给它一个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 ( 
  
  
  
  
            
 
  
  
  
  
                
Click outside!
 
  
  
  
  
                Don't click me! 
  
  
  
  
             
  
  
  
  
        ) 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
export default onClickOutside(App) 
 
 
 

新闻标题：5个很棒的 React.js 库，值得你亲手试试！
网页URL：http://www.csdahua.cn/qtweb/news18/375668.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网