まとめ
Vue でも React でも要素の DOM を使いたい場合、JS では DOM を操作する必要がなく、ref という専用の API が用意されています。
Vue の ref は比較的単純かもしれませんが、この記事では主に React での ref の使用方法と ref を使用するシナリオについて説明します。
1. ref の取り付け
React では、ref は html 要素にマウントでき、同時に React 要素にもマウントできます。次のコードを参照してください。
import React, {
Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'
export default class Father extends Component {
componentDidMount(){
console.log(this.refs.refElement);
console.log(this.refs.child);
}
render() {
return (
<div>
<input ref={
'refElement' }></input>
<Child ref={
'child' }/>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
コンソール出力は次のとおりです。
ご覧のとおり、React では ref を HTML 要素と React 要素にマウントできます。
(1) HTML 要素をマウントし、実際の DOM を返す
(2) React 要素をマウントし、レンダリングされたインスタンス オブジェクトを返す
同時に、React は、React 要素の ref リターンを実際の DOM 要素に変換できるメソッドfindDOMNodeも提供します。
import {
findDOMNode } from 'react-dom'
console.log(findDOMNode(this.refs.child));
同時に、上記のコードから、ref のマウントが componentDidMount などのライフサイクルの前に実行されることもわかります。
2. ref の 3 つの使用方法
(1)文字列方式
import React, {
Component } from 'react'
export default class Father extends Component {
componentDidMount(){
console.log(this.refs.refElement);
}
render() {
return (
<div>
<input ref={
'refElement' }></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
この方法は Vue の ref に似ていますが、現時点では政府によって推奨されておらず、将来的に破棄される可能性があります。
(2) 機能の仕方
import React, {
Component } from 'react'
export default class Father extends Component {
componentDidMount(){
console.log(this.refElement);
}
render() {
return (
<div>
<input ref={
ref => this.refElement = ref }></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
(3) react.CreateRefのやり方
import React, {
Component } from 'react'
export default class Father extends Component {
refElement = React.createRef();
componentDidMount(){
console.log(this.refElement.current);
}
render() {
return (
<div>
<input ref={
this.refElement}></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
refElement の current を通じて実際の DOM 要素を取得することを忘れないでください。
3. ref の使用シナリオ
ここでは、ボタンをクリックして入力ボックスにフォーカスするという、より一般的なシナリオについて説明します。
import React, {
Component } from 'react'
export default class Father extends Component {
refElement = React.createRef();
componentDidMount(){
console.log(this.refElement.current);
}
fn = ()=>{
this.refElement.current.focus();
}
render() {
return (
<div>
<input ref={
this.refElement}></input>
<button onClick={
this.fn}>聚焦</button>
</div>
)
}
}
DOM を取得したら、DOM で focus メソッド API を呼び出して、入力ボックスをフォーカスします。
同時に、移動、サイズの変更など、一部の DOM 要素のアニメーション効果にも ref を適用できます。これらはすべて、操作するために ref を介して DOM を制御する必要があります。