React では、refs は DOM 要素 に直接アクセスして対話するために使用されます。 React は通常、state と props を通じて宣言的な方法で DOM を管理しますが、アニメーション、フォーム フィールドのフォーカス、要素の寸法の測定など、DOM と直接対話する必要がある場合があります。このような場合、ref は基礎となる DOM ノードにアクセスする方法を提供します。
ref (reference の略) は、DOM 要素または React コンポーネント インスタンスを参照できるようにするオブジェクトです。 Ref は、クラス コンポーネントの React.createRef() または関数コンポーネントの useRef() を使用して作成できます。通常、Ref は次の目的で使用されます。
クラスコンポーネントでは、React.createRef() を使用して参照が作成されます。作成された ref は、ref 属性を介して DOM 要素にアタッチされます。
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
// Create a ref to access the input element
this.inputRef = React.createRef();
}
handleFocus = () => {
// Access the DOM node directly and focus the input element
this.inputRef.current.focus();
};
render() {
return (
<div>
<input ref={this.inputRef} type="text" />
<button onClick={this.handleFocus}>Focus Input</button>
</div>
);
}
}
export default MyComponent;
この例では:
関数コンポーネントでは、useRef フックを使用して参照が作成されます。 useRef フックを使用すると、再レンダリング後も保持される変更可能な参照オブジェクトを作成できます。
import React, { useRef } from 'react';
const MyComponent = () => {
const inputRef = useRef();
const handleFocus = () => {
// Access the DOM node directly and focus the input element
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
};
export default MyComponent;
この例では:
Ref は、DOM 要素に直接アクセスして操作するためによく使用されます。たとえば、テキスト入力に焦点を当てたり、要素のサイズを測定したりすることは、refs を使用して簡単に行うことができます。
Ref を使用すると、コンポーネントのマウント時や特定のアクションの後に入力フィールドにフォーカスするなど、要素のフォーカスを管理できます。
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
// Create a ref to access the input element
this.inputRef = React.createRef();
}
handleFocus = () => {
// Access the DOM node directly and focus the input element
this.inputRef.current.focus();
};
render() {
return (
<div>
<input ref={this.inputRef} type="text" />
<button onClick={this.handleFocus}>Focus Input</button>
</div>
);
}
}
export default MyComponent;
この例では、useEffect フックと ref のおかげで、コンポーネントがマウントされるときに入力が自動的にフォーカスされます。
Ref は、サードパーティのライブラリと対話したり、命令型アニメーションをトリガーしたりするためによく使用されます。たとえば、ref を使用してカスタム アニメーションを制御したり、jQuery などの非 React ライブラリを操作したりできます。
Ref を使用して、データを React の状態に保存せずにフォーム データを収集することもでき、リアルタイムの更新を必要としないフォームに簡単な代替手段を提供します。
複数の要素を操作する場合、オブジェクトまたは配列に ref を格納して各要素にアクセスできます。
import React, { useRef } from 'react';
const MyComponent = () => {
const inputRef = useRef();
const handleFocus = () => {
// Access the DOM node directly and focus the input element
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
};
export default MyComponent;
この例では、複数の入力要素が refs の配列を使用して管理され、ボタンを使用して 2 番目の入力にフォーカスします。
ref は DOM と対話する方法を提供しますが、React の state は UI のレンダリングに影響するデータを管理するために使用されます。それぞれをいつ使用するかを理解することが重要です:
React の Ref は、DOM 要素に直接アクセスして操作するための強力な機能です。これらは UI を操作するための必須の方法を提供し、入力フィールドのフォーカス、アニメーションのトリガー、サードパーティ ライブラリとの統合などの操作を可能にします。
React は state と props を使用した宣言的なアプローチを推奨していますが、DOM とのより直接的なやり取りを実行する必要がある場合、ref は不可欠なツールとして機能します。
以上がReact の Ref と DOM を理解する: DOM 要素へのアクセスと操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
