日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React高級指引之Refs?and?the?DOM使用時機詳解_React

作者：碼農小菲 ? 更新時間： 2023-04-26 編程語言

Refs and the DOM

  • Refs 提供了一種方式，允許我們訪問 DOM 節點或在 render 方法中創建的 React 元素
  • 在某些情況下，需要在典型數據流之外強制修改子組件。被修改的子組件可能是一個 React 組件的實例，也可能是一個 DOM 元素。

何時使用 Refs

  • 管理焦點，文本選擇或媒體播放
  • 觸發強制動畫
  • 集成第三方 DOM 庫

勿過度使用 Refs

創建 Refs

  • React.createRef()創建
  • 通過 ref 屬性附加到 React 元素
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

訪問 Refs

在 ref 的 current 屬性中被訪問

const node = this.myRef.current;

為 DOM 元素添加 ref

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 創建一個 ref 來存儲 textInput 的 DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }
  focusTextInput() {
    // 直接使用原生 API 使 text 輸入框獲得焦點
    // 注意：我們通過 "current" 來訪問 DOM 節點
    this.textInput.current.focus();
  }
  render() {
    // 告訴 React 我們想把 <input> ref 關聯到
    // 構造器里創建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

為 class 組件添加 Ref

  class AutoFocusTextInput extends React.Component {
    constructor(props) {
      super(props);
      this.textInput = React.createRef();
    }
    componentDidMount() {
      this.textInput.current.focusTextInput();
    }
    render() {
      return (
        <CustomTextInput ref={this.textInput} />
      );
    }
  }

不能在函數組件上使用 ref 屬性,如果要在函數組件中使用 ref，你可以使用 forwardRef（可與 useImperativeHandle 結合使用），或者可以將該組件轉化為 class 組件

function CustomTextInput(props) {
   // 這里必須聲明 textInput，這樣 ref 才可以引用它
   const textInput = useRef(null);
   function handleClick() {
     textInput.current.focus();
   }
   return (
     <div>
       <input
         type="text"
         ref={textInput} />
       <input
         type="button"
         value="Focus the text input"
         onClick={handleClick}
       />
     </div>
   );
 }

將 DOM Refs 暴露給父組件

不建議暴露 DOM 節點

回調 Refs

  • 另一種設置 refs 的方式，稱為“回調 refs”.
  • 能助你更精細地控制何時 refs 被設置和解除
  • 不同于傳遞 createRef() 創建的 ref 屬性，你會傳遞一個函數。這個函數中接受 React 組件實例或 HTML DOM 元素作為參數，以使它們能在其他地方被存儲和訪問
    class CustomTextInput extends React.Component {
     constructor(props) {
       super(props);
       this.textInput = null;
       this.setTextInputRef = element => {
         this.textInput = element;
       };
       this.focusTextInput = () => {
         // 使用原生 DOM API 使 text 輸入框獲得焦點
         if (this.textInput) this.textInput.focus();
       };
     }
     componentDidMount() {
       // 組件掛載后，讓文本框自動獲得焦點
       this.focusTextInput();
     }
     render() {
       // 使用 `ref` 的回調函數將 text 輸入框 DOM 節點的引用存儲到 React
       // 實例上（比如 this.textInput）
       return (
         <div>
           <input
             type="text"
             ref={this.setTextInputRef}
           />
           <input
             type="button"
             value="Focus the text input"
             onClick={this.focusTextInput}
           />
         </div>
       );
     }
   }
// 在上面的例子中，Parent 把它的 refs 回調函數當作 inputRef props 傳遞給了 CustomTextInput，而且 CustomTextInput 把相同的函數作為特殊的 ref 屬性傳遞給了 <input>。結果是，在 Parent 中的 this.inputElement 會被設置為與 CustomTextInput 中的 input 元素相對應的 DOM 節點

如果 ref 回調函數是以內聯函數的方式定義的，在更新過程中它會被執行兩次，第一次傳入參數 null，然后第二次會傳入參數 DOM 元素。這是因為在每次渲染時會創建一個新的函數實例，所以 React 清空舊的 ref 并且設置新的。通過將 ref 的回調函數定義成 class 的綁定函數的方式可以避免上述問題，但是大多數情況下它是無關緊要的。

原文鏈接：https://blog.csdn.net/xbczrz/article/details/128921280

欄目分類
最近更新