React における ref の一般的な使用法の概要

「react」からReactをインポートします。
// 親コンポーネントのエクスポート デフォルトクラス StringRef は React.PureComponent を拡張します {
  コンポーネントマウント() {
    console.log("stringRefDom:", this.refs.stringRefDom);
    console.log("stringRefComp:", this.refs.stringRefComp);
  }
  与える（） {
    戻る （
      <div>
        ネイティブ コンポーネントの使用方法*/
        <div ref={"stringRefDom"}>文字列参照Dom</div>
        クラスコンポーネントの使用方法*/
        <StringRefComp ref={"stringRefComp"} />
      </div>
    );
  }
}
//クラスコンポーネントクラスStringRefCompはReact.PureComponentを拡張します{
  与える（） {
    <div>StringRefComp</div> を返します。
  }
}

「react」からReactをインポートします。
// 親コンポーネントのエクスポート デフォルトクラス CallbackRef は React.PureComponent を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    this.callbackRefDom = null;
    this.callbackRefComp = null;
  }
  コンポーネントマウント() {
    console.log("コールバックRefDom:", this.callbackRefDom);
    console.log("コールバックRefComp:", this.callbackRefComp);
  }
  //コールバック関数 setCallbackRefDom = (ref) => {
    this.callbackRefDom = ref;
  };
  setCallbackRefComp = (ref) => {
    this.callbackRefComp = ref;
  };
  //コールバック関数render() {
    戻る （
      <div>
        <div ref={this.setCallbackRefDom}>コールバックRefDom</div>
        <CallbackRefComp ref={this.setCallbackRefComp} />
      </div>
    );
  }
}

//クラスコンポーネントクラスCallbackRefCompはReact.PureComponentを拡張します{
  与える（） {
    <div>callbackRefComp</div> を返します。
  }
}

「react」からReactをインポートします。
// 親コンポーネントのエクスポート デフォルトクラス CreateRef は React.PureComponent を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    React のインスタンスを作成します。
    this.createRefComp = React.createRef();
  }
  コンポーネントマウント() {
    console.log("createRefDom:", this.createRefDom.current);
    console.log("createRefComp:", this.createRefComp.current);
  }
  与える（） {
    戻る （
      <div>
        <div ref={this.createRefDom}>RefDom を作成します</div>
        <CreateRefComp ref={this.createRefComp} />
      </div>
    );
  }
}
//クラスコンポーネントクラスCreateRefCompはReact.PureComponentを拡張します{
  与える（） {
    <div>CreateRefComp</div> を返します。
  }
}

React をインポートし、{useEffect} を "react" から取得します。
// 親コンポーネント const UseRef = React.memo(() => {
  // // 以下も使用できます // const createRefDom = React.createRef();
  // const createRefComp = React.createRef();
  React のインスタンスを 1 つ作成します。
  React のインスタンスを作成します。
  使用効果(() => {
    console.log("useRefDom:", createRefDom.current);
    console.log("useRefComp:", createRefComp.current);
  }, []);
  戻る （
    <div>
      <div ref={createRefDom}>useRefDom</div>
      <UseRefComp ref={createRefComp} />
    </div>
  );
});

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

//クラスコンポーネントクラスUseRefCompはReact.PureComponentを拡張します{
  与える（） {
    <div>useRefComp</div> を返します。
  }
}

「react」から React をインポートし、{useEffect、useImperativeHandle} を追加します。

// 親コンポーネント const ForwardRef = React.memo(() => {
  React のインスタンスを作成します。
  React の RefCompMethod を const として定義します。

  使用効果(() => {
    console.log("useRefComp:", createRefComp.current);
    console.log("createRefCompMethod:", createRefCompMethod.current);
    createRefComp.current.reload();
  }, []);
  戻る （
    <div>
      <ForwardRefFunc ref={createRefComp} />
    </div>
  );
});

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

const RefFunc = React.forwardRef((props, ref) => {
  const [name, setName] = React.useState(null);
  定数リロード = () => {
    console.log("リロード");
    タイムアウトを設定する(() => {
      名前を設定します("ForwardRefFunc");
    }, 3000);
  };
  //useImperativeHandle を使用すると、refuseImperativeHandle(ref, () => { を使用するときに親コンポーネントに公開されるインスタンス値をカスタマイズできます。
    戻る {
      リロード: リロード、
    };
  });
  <div ref={ref}>ForwardRefFunc {name}</div> を返します。
});
React の RefFunc を実装します。