React forwardRefの使い方と注意点

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

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

React をインポートし、{useRef} を 'react' から取得します。
'./content' からコンテンツをインポートします。

const ホーム = () => {
  // Ref オブジェクトを作成します。const connectRef = useRef(null);

  const handleFoucus = () => {
    _ref を connectRef.current に設定します。
    _ref.focus();
  };

  戻る （
    <div>
        <ボタンのクリック={() => handleFoucus()}>
          子コンポーネントでDOM要素のメソッドを使用する</button>

        <コンテンツref={connectRef} />
    </div>
  );
};

デフォルトのホームをエクスポートします。

React をインポートし、{ forwardRef } を 'react' から取得します。

/**
 * forwardRefがラップした後、refは渡されたref属性を受け取るための2番目のパラメータとして使用されます。 * 例
 * <コンテンツ数={count} ユーザー={user} 参照={connectRef}>
 *
 * @param props - {count, user}
 * @param ref - connectRef
 * */
const コンテンツ = (props, ref) => {
  戻る （
    <div>
   	  {/* 渡された ref に ref をバインドする ≈ ref={connectRef} */
      <input type="password" ref={ref} />
    </div>
  ）
};

デフォルトの forwardRef(Content) をエクスポートします。

React をインポートし、{useRef} を 'react' から取得します。
'./content' からコンテンツをインポートします。

const ホーム = () => {
  // Ref オブジェクトを作成します。const connectRef = useRef(null);

  定数handleAdd = () => {
    _ref を connectRef.current に設定します。

    const { count } = _ref.state;
    _ref.setState({
      カウント: カウント + 1
    })
  };

  戻る （
    <div>
        <ボタンのクリック={() => handleAdd()}>
          子コンポーネントでクラスコンポーネントのプロパティとメソッドを使用する</button>

        <コンテンツref={connectRef} />
    </div>
  );
};

デフォルトのホームをエクスポートします。

React をインポートし、{ forwardRef } を 'react' から取得します。
'./header' からヘッダーをインポートします。
'./footer' からフッターをインポートします。

/**
 * forwardRefがラップした後、refは渡されたref属性を受け取るための2番目のパラメータとして使用されます。 * 例
 * <コンテンツ数={count} ユーザー={user} 参照={connectRef}>
 *
 * @param props - {count, user}
 * @param ref - connectRef
 * */
const コンテンツ = (props, ref) => {
  戻る （
    <div>
      {/* 渡された ref に ref をバインドする ≈ ref={connectRef} */
      <Header ref={ref} />{/* クラス コンポーネント*/
		
      {/* <Footer ref={ref} /> 関数コンポーネントにはインスタンスがないので、connectRef.current: null */
    </div>
  ）
};

デフォルトの forwardRef(Content) をエクスポートします。

'react' から React をインポートします。

デフォルトクラス Header をエクスポートし、React.Component を拡張します {
  状態 = {
    カウント: 0
  };

  与える（） {
    戻る （
      <div>
        {この州数}
      </div>
    ）
  }
};

/*
  参照の処理
  例: Hoc1(Hoc2(コンテンツ))

  <Content ref={myRef} /> Content にバインドされた ref は Hoc1 にバインドされ、最初のメソッド React.forwardRef には渡されません ================

      React.forwardRef()を使用してHoc1の外部でrefを処理し、propsを使用してrefを渡す
      0. forwardRefを高階成分の外側にラップし、refをインターセプトして取得し、props(xxx={ref})を追加し、実際の成分はprops.xxxを通じて取得されます1. 使用時にref={XXXX}を渡す // 2番目の方法との違い2. forwardRefの2番目のパラメータを使用してrefを取得します
      3. 参照を下方に転送するための新しいプロパティを追加します。例: forwardedRef={ref}
      4. 実際のコンポーネントにref={props.forwardedRef}をバインドする

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

        戻る （
          <div>
            <コンテンツref={connectRef} />
          </div>
        );
      };

      // ラップされたコンポーネント const Content = (props) => {
        戻る （
          <div>
            <input type="password" ref={props.forwardedRef} />
          </div>
        );
      };


      // forwardRef の 2 番目の入力パラメータは 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} />;
      });

  2番目の方法 ==========

  0. 使用時に参照を保存するにはpropsを使用します
  1. 使用時にxxx={ref}を渡す // 最初の方法との違い 2. 実際のコンポーネントでref={props.xxx}をバインドする

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

    戻る （
      <div>
        <コンテンツ forwardedRef={connectRef} />
      </div>
    );
  };

  // 高階コンポーネントを定義する export const Hoc = (WrappedComponent) => {
    クラス Wrapper は React.Component を拡張します {
      与える（） {
        <WrappedComponent {...props} /> を返します。
      }
    }
  }

  // ラップされたコンポーネント const Content = (props) => {
    戻る （
      <div>
        <input type="password" ref={props.forwardedRef} />
      </div>
    );
  };

  // パッケージ化プロセス export default Hoc(Content);

* */