ReactにおけるRefの相互利用の詳細な説明

1. まずRefとは何かを説明しましょう

Ref 転送は、ref をコンポーネントを介してその子の 1 つに自動的に渡す手法です。これは通常、ほとんどのアプリケーションのコンポーネントでは必要ありません。しかし、一部のコンポーネント、特に再利用可能なコンポーネントライブラリには役立ちます。

Ref公式サイトの説明：ここをクリック

2. フックでのrefの使用

1. HTMLDomフックでのrefの使用

公式ウェブサイトで通常どおり使用してください。次に例を示します。

定数Fn = ()=>{
    定数 testRef = useRef(null);
    console.log('testRef',testRef.current); // 2 回レンダリングされます。1 回目は null を出力し、2 回目は <div>test</div> を出力します。
    戻る （
        <div ref={testRef}>テスト</div>
    ）
}

2. フックと関数コンポーネントでのrefの使用

ここでは、関数コンポーネントにref属性を渡すだけです。

定数Fn = ()=>{
    定数 testRef = useRef(null);
    // テスト関数コンポーネントを定義します。const Test = ({ refs }) => <div ref={refs}>I am ReactDOM test</div>;
    console.log('testRef',testRef.current); // 2 回レンダリングされます。1 回目は null を出力し、2 回目は <div>I am ReactDOM test</div> となります。
    戻る （
        * ここで ref as prop の代わりに refs が使用されている理由は、ref は react によって特別に処理され、キー * と同様に react コンポーネントに props として渡されないためです。
         <テスト参照={testRef} /> 
    ）
}

3. フック内のクラスコンポーネントでrefを使用する

ここでは、クラスコンポーネントのコールバックrefのuseRefオブジェクトに手動で値を割り当てるだけです。その他のコールバックrefについては、こちらを参照してください。

'react-dom' から ReactDom をインポートします。

定数Fn = ()=>{
    const testClassRef = useRef(null);
    // TestClassクラスコンポーネントを定義する class TestClass extends React.Component {
        与える（） {
          戻る （
            <div> 要素
                私は TestClass コンポーネント テストです</div>
          ）
        }
    }
    console.log('testClassRef',testClassRef.current); // 2 回レンダリングされ、1 回目は null を出力し、2 回目は <div>I am a TestClass component test</div> となります。
    戻る （
        * ここで ref as prop の代わりに refs が使用されている理由は、ref は react によって特別に処理され、キー * と同様に react コンポーネントに props として渡されないためです。
         <テストクラス 
             ref={el => {
                console.log('新しいレンダリング参照')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    ）
}

4. フック内でクラスと react-redux で ref を使用する

connect でラップされたクラスコンポーネントに遭遇した場合、最外層が react-redux Provider でラップされているため、実際の React コンポーネントに ref 属性を渡す必要があります。このとき、connect の forwardRef 属性に注意する必要があります。

'react-dom' から ReactDom をインポートします。
'react-redux' から connect をインポートします。

定数Fn = ()=>{
    const testClassRef = useRef(null);
    // TestClassクラスコンポーネントを定義する class TestClass extends React.Component {
        与える（） {
          戻る （
            <div> 要素
                私は TestClass コンポーネント テストです</div>
          ）
        }
    }
    //TestClass の connect でラップされたコンポーネントを定義します //forwardRef:true connect でラップされたコンポーネントに ref を props として渡すことができるように redux を設定します const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); // 2 回レンダリングされ、1 回目は null を出力し、2 回目は <div>I am a TestClass component test</div> となります。
    戻る （
        * ここで ref as prop の代わりに refs が使用されている理由は、ref は react によって特別に処理され、キー * と同様に react コンポーネントに props として渡されないためです。
         <テストクラス接続
            ref={el => {
              console.log('新しいレンダリング参照')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    ）
}

以上がReactにおけるRefの相互利用についての詳しい説明です。ReactにおけるRefの相互利用についてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！

以下もご興味があるかもしれません: