日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這是實(shí)現(xiàn)鉤子的方法：

 
 
 
 

  
  
  
  
function Button(props) { 
  
  
  
  
  let ref = useRef(); 
  
  
  
  
  let {buttonProps} = useButton(props, ref); 
  
  
  
  
  let {children} = props; 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
        {children} 
  
  
  
  
         
  
  
  
  
    ); 
  
  
  
  
} 
  
  
  
  
 alert('Button pressed!')}>Test 
 
 
 
 

React Aria的另一個(gè)獨(dú)特功能是其焦點(diǎn)鉤子。FocusRing通過給元素賦予特定的樣式，通常是一個(gè)藍(lán)色的邊框，幫助鍵盤用戶確定頁(yè)面上哪個(gè)元素具有鍵盤焦點(diǎn)。

 
 
 
 

  
  
  
  
// style 
  
  
  
  
.button { 
  
  
  
  
  -webkit-appearance: none; 
  
  
  
  
  appearance: none; 
  
  
  
  
  background: green; 
  
  
  
  
  border: none; 
  
  
  
  
  color: white; 
  
  
  
  
  font-size: 14px; 
  
  
  
  
  padding: 4px 8px; 
  
  
  
  
} 
  
  
  
  
.button.focus-ring { 
  
  
  
  
  outline: 2px solid dodgerblue; 
  
  
  
  
  outline-offset: 2px; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// component 
  
  
  
  
 
  
  
  
  
  Test 
  
  
  
  
 
 
 
 
 

當(dāng)你不使用CSS類(例如樣式組件)進(jìn)行樣式設(shè)置時(shí)，可以使用useFocusRing鉤子：

 
 
 
 

  
  
  
  
function Example() { 
  
  
  
  
  let {isFocusVisible, focusProps} = useFocusRing(); 
  
  
  
  
  return ( 
  
  
  
  
      
  
  
  
  
        {...focusProps} 
  
  
  
  
        style={{ 
  
  
  
  
          WebkitAppearance: 'none', 
  
  
  
  
          appearance: 'none', 
  
  
  
  
          background: 'green', 
  
  
  
  
          border: 'none', 
  
  
  
  
          color: 'white', 
  
  
  
  
          fontSize: 14, 
  
  
  
  
          padding: '4px 8px', 
  
  
  
  
          outline: isFocusVisible ? '2px solid dodgerblue' : 'none', 
  
  
  
  
          outlineOffset: 2 
  
  
  
  
        }}> 
  
  
  
  
        Test 
  
  
  
  
       
  
  
  
  
    ); 
  
  
  
  
} 
 
 
 
 

最后，React Aria還提供了對(duì)國(guó)際化的支持，以幫助你的應(yīng)用程序適應(yīng)特定的語(yǔ)言或地區(qū)。i18nProvider組件允許你使用應(yīng)用程序定義的語(yǔ)言環(huán)境覆蓋瀏覽器中的默認(rèn)語(yǔ)言環(huán)境：

  
  
 
 

   
   
  
  
import {I18nProvider} from '@react-aria/i18n'; 
   
   
  
  
 
   
   
  
  
 
   
   
  
  
   
   
   
  
  
 
  
  
 
 

React Stately如何工作

React Stately是一個(gè)鉤子庫(kù)，可為你的設(shè)計(jì)系統(tǒng)提供跨平臺(tái)狀態(tài)管理。它可以在Web，react-native或任何其他平臺(tái)上運(yùn)行。

例如，你可以實(shí)現(xiàn)useRadioGroupState來(lái)幫助存儲(chǔ)一個(gè)Radio按鈕組的狀態(tài)，而不需要定義自己的onChange函數(shù)。

  
  
 
 

   
   
  
  
import {useRadioGroupState} from '@react-stately/radio'; 
   
   
  
  
function RadioGroup(props) { 
   
   
  
  
  let state = useRadioGroupState(props); 
   
   
  
  
   
   
   
  
  
return ( 
   
   
  
  
    <> 
   
   
  
  
       
   
   
  
  
        
   
   
  
  
          type="radio" 
   
   
  
  
          name={state.name} 
   
   
  
  
          checked={state.selectedValue === 'dogs'} 
   
   
  
  
          onChange={() => state.setSelectedValue('dogs')} 
   
   
  
  
        /> 
   
   
  
  
        Dogs 
   
   
  
  
       
   
   
  
  
       
   
   
  
  
        
   
   
  
  
          type="radio" 
   
   
  
  
          name={state.name} 
   
   
  
  
          checked={state.selectedValue === 'cats'} 
   
   
  
  
          onChange={() => state.setSelectedValue('cats')} 
   
   
  
  
        /> 
   
   
  
  
        Cats 
   
   
  
  
       
   
   
  
  
     
   
   
  
  
  ); 
   
   
  
  
} 
   
   
  
  
 
   
   
  
  

   
   
  
  
  defaultValue="dogs" 
   
   
  
  
  onChange={(value) => alert(`Selected ${value}`)} 
   
   
  
  
/> 
  
  
 
 

React Stately的大多數(shù)鉤子就像帶有不可變性的常規(guī)useState鉤子一樣。將其用于Web時(shí)，可以將其與React Aria配對(duì)以提供組件的可訪問性和用戶交互。就像React Aria一樣，React Stately可以逐步實(shí)現(xiàn)。

總結(jié)

許多公司和團(tuán)隊(duì)只是沒有資源來(lái)優(yōu)先考慮諸如可訪問性、國(guó)際化、全鍵盤導(dǎo)航和觸摸交互等功能。我們中的大多數(shù)人都在忙于發(fā)布核心應(yīng)用功能。

這就是為什么React Spectrum對(duì)許多團(tuán)隊(duì)如此有價(jià)值。這些庫(kù)的設(shè)計(jì)讓你可以在不同的設(shè)備上逐步將你的應(yīng)用邏輯分享給許多組件。有了React Spectrum，你不必再投入時(shí)間和金錢去創(chuàng)建一個(gè)支持無(wú)障礙和國(guó)際化的設(shè)計(jì)系統(tǒng)。