React.forwardRef 理解

阿新 • • 發佈：2021-06-24

React.forwardRef會建立一個React元件，這個元件能夠將其接受的ref屬性轉發到其元件樹下的另一個元件中。這種技術並不常見，但在以下兩種場景中特別有用：官方解釋： https://react.docschina.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components 個人程式碼例項理解：一、refs轉發到DOM

　　const { Component, createRef, forwardRef, Fragment } = React
　　
　　// DOM 元件
    const FouseInput = forwardRef((props, ref) => {
        return (
           
<input type="text" ref={ref} />
        )
    })

    class App extends Component {
      componentDidMount () {
        const { current } = this.inputRef
        console.log(current);
        current.focus()
      }
      render () {
        this.inputRef = createRef()
        return (
           
<FouseInput ref={this.inputRef}/>
        )
      }
    }

　　 ReactDOM.render(<App/>,document.getElementById('app')); 二、refs轉發高階元件

　const{Component,createRef,forwardRef,Fragment}=React

class App extends Component {
      render () {
        const Compoent = LogProps(FouseRefs)
        return (
           
<Compoent/>
        )
      }
    }

    class FouseRefs extends Component {
      render () {
        const { inputRef, ...rest } = this.props
        return (
          <Fragment>
            <div>input自動聚焦</div>
            <input type="text" ref={inputRef} {...rest} />
          </Fragment>
        )
      }
    }

    // 定義一個高階元件
    function LogProps (WrapComponent) {
      // 接收傳入的元件 並加以處理， 如 繫結ref
      class WrapCom extends Component {
        componentDidMount () {
          const { current } = this.ref
          console.log(current);
          current.focus()
        }
        render () {
          this.ref = createRef()
          return (
            <WrapComponent inputRef={this.ref} {...this.props} />
          )
        }
      }
      // 通過forwardRef 包裝 返回出去，即被包裝元件即可使用 ref
      return forwardRef((props, ref) => {
        return <WrapCom />
      })
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

完整程式碼

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <div id="app"></div>
</body>
</html>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
  <script type="text/babel"> // 使用jsx語法
    const { Component, createRef, forwardRef, Fragment } = React

    // 一 、refs轉發到DOM
    // const FouseInput = forwardRef((props, ref) => {
    //     return (
    //       <input type="text" ref={ref} />
    //     )
    // })

    // class App extends Component {
    //   componentDidMount () {
    //     const { current } = this.inputRef
    //     console.log(current);
    //     current.focus()
    //   }
    //   render () {
    //     this.inputRef = createRef()
    //     return (
    //       <FouseInput ref={this.inputRef}/>
    //     )
    //   }
    // }

    // 二、refs轉發 高階元件
    class App extends Component {
      render () {
        const Compoent = LogProps(FouseRefs)
        return (
          <Compoent/>
        )
      }
    }

    class FouseRefs extends Component {
      render () {
        const { inputRef, ...rest } = this.props
        return (
          <Fragment>
            <div>input自動聚焦</div>
            <input type="text" ref={inputRef} {...rest} />
          </Fragment>
        )
      }
    }

    // 定義一個高階元件
    function LogProps (WrapComponent) {
      // 接收傳入的元件 並加以處理， 如 繫結ref
      class WrapCom extends Component {
        componentDidMount () {
          const { current } = this.ref
          console.log(current);
          current.focus()
        }
        render () {
          this.ref = createRef()
          return (
            <WrapComponent inputRef={this.ref} {...this.props} />
          )
        }
      }
      // 通過forwardRef 包裝 返回出去，即被包裝元件即可使用 ref
      return forwardRef((props, ref) => {
        return <WrapCom />
      })
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>

React.forwardRef 理解

React.forwardRef會建立一個React元件，這個元件能夠將其接受的ref屬性轉發到其元件樹下的另一個元件中。這種技術並不常見，但在以下兩種場景中特別有用：

antd hooks --Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

問題描述：在Antd Form 元件中，當子元件使用Hooks自定義 Function component時，提示以下警告錯誤。

React高階元件中使用React.forwardRef的技巧

之前使用react.forwardRef始終無法應用於react高階元件中，最近終於搗鼓出來了，於是記錄下來。關鍵點就是React.forwardRef的API中ref必須指向dom元素而不是React元件。

React forwardRef的使用方法及注意點

React Context 理解和使用

基本概念 Context是react中為了避免在不同層級元件中逐層傳遞props的產物，在沒有Context的時候父元件向子元件傳遞props屬性只能在元件樹上自上而下進行傳遞，但是有些屬性並不是元件樹的每層節點都有相同的需求，

React Hooks理解使用(1)

一 useState狀態管理：https://www.jianshu.com/p/700777ea9db0 useState(initialState)的第一個引數是初始狀態。返回的陣列有兩項:當前狀態和狀態更新函式。

React Hooks理解與運用(2)

一 useRef與createRef區別： 1 useRef:useRef返回一個可變的 ref 物件，其.current屬性被初始化為傳入的引數（initialValue）。返回的 ref 物件在元件的整個生命週期內持續存在。

React學習理解

表單受控元件官方定義在 HTML 中，表單元素（如<input>、 <textarea> 和 <select>）通常自己維護 state，並根據使用者輸入進行更新。而在 React 中，可變> 狀態（mutable state）通常儲存

手寫React的Fiber架構，深入理解其原理

熟悉React的朋友都知道，React支援jsx語法，我們可以直接將HTML程式碼寫到JS中間，然後渲染到頁面上，我們寫的HTML如果有更新的話，React還有虛擬DOM的對比，只更新變化的部分，而不重新渲染整個頁面，大大提高渲染效

深入理解React：事件機制原理

目錄序言 DOM事件流事件捕獲階段、處於目標階段、事件冒泡階段 addEventListener 方法

深入理解React：diff 演演算法

目錄序言 React 的核心思想傳統 diff 演演算法 React diff 兩個假設三個策略 diff 具體優化

深入理解React：diff 演算法

目錄序言 React 的核心思想傳統 diff 演算法 React diff 兩個假設三個策略 diff 具體優化

React 【元件和 JSX 】編寫React元素、建立元件、理解JSX、JSX規則、使用Fragments

目錄： 1. 編寫 React 元素 2. 建立元件 3. 理解 JSX 4. JSX 規則 5. 使用 Fragments 編寫 React 元素

[React] useImperativeHandle + forwardRef

We have a message app: function App() { const messageDisplayRef = React.useRef() .... const scrollToTop = () => messageDisplayRef.current.scrollToTop()