React forwardRef的使用方法及註意點

Posted on by

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

React.forwardRef使用示例

下面就是應用到React組件的錯誤示例：

const A=React.forwardRef((props,ref)=><B {...props} ref={ref}/>)

這就是我之前經常犯的錯誤， 這裡的ref是無法生效的。

前面提到ref必須指向dom元素，那麼正確方法就應用而生：

const  A=React.forwardRef((props,ref)=>(
<div ref={ref}>
<B {...props} />
</div>
))

作用與註意點

  1. 父組件創建一個ref對象，綁定給子組件中的Dom元素或class組件
  2. 函數組件是沒有實例的
  3. 高階組件需做特殊處理

父組件獲取子組件中Dom元素實例

在這裡插入圖片描述 

import React, { useRef } from 'react';
import Content from './content';

const Home = () => {
  // 創建一個Ref對象
  const connectRef = useRef(null);

  const handleFoucus = () => {
    const _ref = connectRef.current;
    _ref.focus();
  };

  return (
    <div>
        <button onClick={() => handleFoucus()}>
          使用子組件中DOM元素的方法
        </button>

        <Content ref={connectRef} />
    </div>
  );
};

export default Home;
import React, { forwardRef } from 'react';

/**
 * forwardRef包裹後，ref會作為第二個參數，接收傳進來的ref屬性
 * e.g.
 * <Content count={count} user={user} ref={connectRef}>
 *
 * @param props - {count, user}
 * @param ref   - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
   	  {/* 把ref綁定給傳進來的ref ≈ ref={connectRef} */}
      <input type="password" ref={ref} />
    </div>
  )
};

export default forwardRef(Content);

父組件獲取子組件中class組件實例

在這裡插入圖片描述

import React, { useRef } from 'react';
import Content from './content';

const Home = () => {
  // 創建一個Ref對象
  const connectRef = useRef(null);

  const handleAdd = () => {
    const _ref = connectRef.current;

    const { count } = _ref.state;
    _ref.setState({
      count: count + 1
    })
  };

  return (
    <div>
        <button onClick={() => handleAdd()}>
          使用子組件中class組件的屬性和方法
        </button>

        <Content ref={connectRef} />
    </div>
  );
};

export default Home;
import React, { forwardRef } from 'react';
import Header from './header';
import Footer from './footer';

/**
 * forwardRef包裹後，ref會作為第二個參數，接收傳進來的ref屬性
 * e.g.
 * <Content count={count} user={user} ref={connectRef}>
 *
 * @param props - {count, user}
 * @param ref   - connectRef
 * */
const Content = (props, ref) => {
  return (
    <div>
      {/* 把ref綁定給傳進來的ref ≈ ref={connectRef} */}
      <Header ref={ref} />  {/* class組件 */}
		
      {/* <Footer ref={ref} /> 函數組件是沒有實例的，所以connectRef.current: null */}
    </div>
  )
};

export default forwardRef(Content)
import React from 'react';

export default class Header extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        {this.state.count}
      </div>
    )
  }
};

高階組件中的特殊情況

高階組件會把所有接收到的props，傳遞給被包裝的組件（透傳）
ref 和 key 類似，不是一個prop，所以不會透傳，ref會綁定到外層的包裝容器上

/*
  處理ref
  e.g. Hoc1(Hoc2(Content))

  <Content ref={myRef} /> 給Content綁定的ref會綁定到Hoc1上，且不會繼續向下傳遞

  第一種方法 React.forwardRef ===============

      在 Hoc1外面 用React.forwardRef()對ref做處理，用props來傳遞ref
      0. 在高階組件外面包裹forwardRef，攔截獲取ref，增加一個props（xxx={ref}），真實組件通過props.xxx獲取
      1. 使用時傳 ref={XXXX}  // 和第二種方法不同的地方
      2. 用forwardRef的第二個參數獲取 ref
      3. 增加一個新的props，用來向下轉發ref  e.g. forwardedRef={ref}
      4. 真實組件中綁定 ref={props.forwardedRef}

      const Home = (props) => {
        const connectRef = useRef(null);

        return (
          <div>
            <Content ref={connectRef} />
          </div>
        );
      };

      // 被包裝組件
      const Content = (props) => {
        return (
          <div>
            <input type="password" ref={props.forwardedRef} />
          </div>
        );
      };


      // forwardRef的第二個入參可以接收ref，在Hoc外層對ref做處理
      export default React.forwardRef((props, ref) => {
        const Wrapper = React.memo(Content);  // Hoc

        // forwardRef包裹的是Wrapper
        // 需要在Wrapper中把ref向下傳遞給真實組件
        // Wrapper中增加一個props屬性，把ref對象作為props傳給子組件
        return <Wrapper {...props} forwardedRef={ref} />;
      });

  第二種方法 ==========

  0. 使用時就用一個props來保存ref
  1. 使用時傳 xxx={ref}  // 和第一種方法的不同點
  2. 真實組件中綁定 ref={props.xxx}

  const Home = (props) => {
    const connectRef = useRef(null);

    return (
      <div>
        <Content forwardedRef={connectRef} />
      </div>
    );
  };

  // 定義高階組件
  export const Hoc = (WrappedComponent) => {
    class Wrapper extends React.Component {
      render() {
        return <WrappedComponent {...props} />
      }
    }
  }

  // 被包裝的組件
  const Content = (props) => {
    return (
      <div>
        <input type="password" ref={props.forwardedRef} />
      </div>
    );
  };

  // 包裝過程
  export default Hoc(Content);

* */

以上就是React forwardRef的使用方法及註意點的詳細內容，更多關於React forwardRef使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：