RefのReactにおける交差用法を詳しく説明する。

一、まずRefとは何かを説明します。
Ref転送は、refをコンポーネントを介して自動的にそのサブコンポーネントに渡すためのテクニックである。ほとんどのアプリケーションのコンポーネントにとって、これは通常必要ではない。しかし、いくつかのコンポーネント、特に再使用可能なコンポーネントライブラリには、非常に有用です。
Ref公式サイトの説明：ここをクリックしてください。
二、refのヤフーksでの使い方
1、ref hooksでHTMLDomの使い方
ここは公式サイトのように正常に使えばいいです。公式サイトの例：ここです

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); //      ，     null，    <div>  </div>
    return (
        <div ref={testRef}>  </div>
    )
}

2、refは、Hooksにおける関数的なコンポーネントとの使い方
ここでは、ref属性を関数式コンポーネントに透過させるだけでいいです。

const Fn = ()=>{
    const testRef = useRef(null);
    //   Test    
    const Test = ({ refs }) => <div ref={refs}>  ReactDOM test</div>;
    console.log('testRef',testRef.current); //      ，     null，    <div>  ReactDOM test</div>
    return (
        {/*       refs   ref  prop   ref  react    ，    props   react   ，   key */}
         <Test refs={testRef} /> 
    )
}

3、refは、ヤフーksでクラスコンポーネントと一緒に使用する。
ここでは、クラス構成要素のレプリカrefにおいて、手動でuseRefオブジェクトに値を割り当てるだけでよく、より多くのレプリカref：ここです

import ReactDom from 'react-dom';

const Fn = ()=>{
    const testClassRef = useRef(null);
    //   TestClass   
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                  TestClass      
            </div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); //      ，     null，    <div>  TestClass      </div>
    return (
        {/*       refs   ref  prop   ref  react    ，    props   react   ，   key */}
         <TestClass 
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

4、refはヤフーksでクラス、react-reduxと一緒に使います。
connectパッケージのクラスコンポーネントに遭遇すると、最外層はすでにreact-reduxのProviderに包まれているので、ref属性を真のReactコンポーネントのように透過する必要があります。このときは、connectのforwardRef属性に注目してください。

import ReactDom from 'react-dom';
import { connect } from 'react-redux';

const Fn = ()=>{
    const testClassRef = useRef(null);
    //   TestClass   
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                  TestClass      
            </div>
          )
        }
    }
    //  TestClass connect      
    //forwardRef:true   redux   ref  props   connect      
    const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); //      ，     null，    <div>  TestClass      </div>
    return (
        {/*       refs   ref  prop   ref  react    ，    props   react   ，   key */}
         <TestClassConnect
            ref={el => {
              console.log('new render refs')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}

以上はRefのReactにおける交差用法の詳細を説明しました。RefのReactにおける交差用法に関する資料は他の関連記事に注目してください。