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 ! 
  
  
  
  
  

一步一步說(shuō)下：

• 首先導(dǎo)入庫(kù)本身，但重要的是隨后導(dǎo)入所需的CSS。
• 然后配置toast，autoClose的意思是toast過(guò)了多長(zhǎng)時(shí)間就會(huì)自動(dòng)消失。
• 通過(guò)使用toast()函數(shù)，就可以讓toast出現(xiàn)。

更酷的功能：

我們還可以在toast中放入JSX：

 
 
 
 
  
  
  
  
const notify = () => toast(
Big Text
) 
 
 
 

autoClose可以替換為false，因此它永遠(yuǎn)不會(huì)自動(dòng)關(guān)閉。

3. react-contextmenu

很難想象沒(méi)有上下文菜單的應(yīng)用，這在網(wǎng)站上也是很不尋常。這不再是因?yàn)樵絹?lái)越多的Web應(yīng)用程序接近真實(shí)的桌面應(yīng)用程序，而這些應(yīng)用程序通常已經(jīng)提供了類似的良好性能和許多功能，而這些功能是我們多年前從未期望過(guò)的。

這些功能之一是用戶對(duì)右鍵單擊的評(píng)估，這種評(píng)估在網(wǎng)站上越來(lái)越多地使用。當(dāng)然，那些是帶有許多UI元素的更復(fù)雜的控件。

通常用于顯示所謂的上下文菜單，為此目的，有一個(gè)非常方便的React.js庫(kù)。用法如下：

 
 
 
 
  
  
  
  
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>是我們需要右鍵單擊以切換菜單的組件。菜單本身是在 包裝器中定義的。對(duì)于每個(gè)項(xiàng)，都有一個(gè) 組件，我們可以給它一個(gè)onClick事件來(lái)處理我們的用戶輸入。

4. react-lazy-load-image-component

在我們的網(wǎng)站上展示大量的圖片需要一段時(shí)間。通常，已加載和突然出現(xiàn)的圖片會(huì)導(dǎo)致用戶對(duì)UI產(chǎn)生不愉快的體驗(yàn)，當(dāng)然我們希望避免這種情況。

一個(gè)為用戶優(yōu)化有關(guān)圖像的所有功能的強(qiáng)大庫(kù)是response-lazy-load-image-component。我們不僅可以創(chuàng)建一個(gè)良好的模糊效果，就像我下面的例子，以橋梁加載的圖像，但我們也可以延遲加載圖像。這可以在下面的官方示例中看到：

5. react-onclickoutside

用戶界面設(shè)計(jì)的一個(gè)重要規(guī)則是，認(rèn)真評(píng)估盡可能多的用戶輸入。每個(gè)人都應(yīng)該清楚這一點(diǎn)，但是有時(shí)可能很難將這樣的東西實(shí)現(xiàn)為代碼。

一個(gè)可以想象的例子是用戶折疊的菜單。如果你想再次關(guān)閉它，90%的用戶傾向于簡(jiǎn)單地點(diǎn)擊網(wǎng)站的死區(qū)(即那些本身不會(huì)產(chǎn)生反應(yīng)的元素)。在幾乎所有的專業(yè)網(wǎng)站上，這是完全相同的。要關(guān)閉菜單，只需再次單擊它的旁邊，而不是直接在它上切換。

有一個(gè)庫(kù)可以滿足這類的操作，它就是response-onclickoutside，它允許我們處理實(shí)際元素之外的單擊事件。

在下面的示例中，你可以看到我們?nèi)绾螢橐粋€(gè)簡(jiǎn)單的h1和button實(shí)現(xiàn)此功能。僅當(dāng)單擊除這兩個(gè)之外的任何內(nèi)容時(shí)，console.log才會(huì)輸出。處理此事件的函數(shù)必須調(diào)用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!