React の 3 つの主要属性における Ref の使用に関する詳細な説明

Reactのドキュメントでは、refsを使いすぎないようにすることが繰り返し強調されているので、DOMネイティブオブジェクトを使って解決できる場合は、refsを使わないようにしましょう。これまでの書き方に従って、まずクラスコンポーネントと関数コンポーネントでのrefsの書き方を示します。

クラスコンポーネント

クラスでは、ref を使用する方法が 3 つあります。最もよく使用されるのはコールバックです。

// refs を直接定義します。非推奨のクラス App は React.PureComponent を拡張します{
    入力の変更 = ()=>{
        const {入力} = this.refs
    }
    与える（） {
        戻る （
            <div>
                <input type="text" placeholder={"値を入力してください"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        ）
    }
}

//コールバックフォームで使用するクラス App extends React.PureComponent{
    入力の変更 = ()=>{
        コンソールにログ出力します。
    }
    与える（） {
        戻る （
            <div>
                <input type="text" placeholder={"値を入力してください"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        ）
    }
}

//createRefを使用する
クラスAppはReact.PureComponentを拡張します{
    入力Ref = React.createRef()
    入力の変更 = ()=>{
        コンソールにログ出力します。
    }
    与える（） {
        戻る （
            <div>
                <input type="text" placeholder={"値を入力してください"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        ）
    }
}

上記はクラスコンポーネントのRefを書く3つの方法です

機能コンポーネント

関数App(){
    定数 inputRef = useRef("")
    戻る （
        <div>
            <input type="text" placeholder={"値を入力してください"} ref={inputRef}/>
        </div>
    ）
}

useRefを使用してコードを直接完成させる

インタビューのよくある質問: React における ref の役割は何ですか?

Ref は、React が DOM 要素またはコンポーネントインスタンスへの安全なアクセスを提供するハンドルです。クラスコンポーネントでは、React は ref 属性の最初の引数を DOM 内のハンドルとして扱います。関数コンポーネントでは、React はフック API の useRef を使用して参照を取得することもできます (useRef 機能はフックでよく使用されます。つまり、コンポーネントが更新されても保存されたデータは更新されず、一定の量を書き込むことができます)

以上がReactの3大属性の1つであるRefの使い方を詳しく解説した内容です。Reactの3大属性の1つであるRefについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！

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