一、react中ref、createRef、React.forwardRef
(1) ref 転送は、コンポーネントを介してそのサブコンポーネントの 1 つに ref を自動的に渡す技術です。通常、これはほとんどのアプリケーションのコンポーネントには必要ありません。ただし、特定のコンポーネント、特に再利用可能なコンポーネント ライブラリには便利です。
(2) React.forwardRef(render) の戻り値は React コンポーネント、受け取ったパラメータは render 関数、関数シグネチャは render(props, ref)、2 番目のパラメータは受け入れた ref 属性をコンポーネントに転送します。レンダリング中間によって返されます。
この手法は一般的ではありませんが、次の 2 つのシナリオで特に役立ちます:
1) コンポーネント内の DOM ノードに参照を転送する
2) 上位コンポーネントに参照を転送する
このようなシナリオがあり、DOM 要素の値を取得する必要があります。 (useStateなし)クラスコンポーネントのメソッドを使用する必要があり、関数コンポーネント内のdom要素を操作する必要があるのですが、どうすればよいでしょうか?
1. dom要素を操作するか、refを通じてdom要素の値を取得します。
考え方の流れとコードは次のとおりです（例）。 （もちろん、一般的な操作 dom は useRef で初期化されることが多いです）
import React from 'react'
import {
ReactDOM } from 'react-dom'
// 一、通过ref操作dom元素或者获取dom元素的值
class Form extends React.Component {
constructor(props) {
super(props)
//1.声明ref方法，实际上是得到{current:null}
this.firstInputRef = React.createRef(null)
this.secondInputRef = React.createRef(null)
this.resultInputRef = React.createRef(null)
}
onClickAdd = () => {
//3.此时InputRef下的current就是dom元素了，
//调current可以直接使用dom元素的value了
this.resultInputRef.current.value = this.firstInputRef.current.value + this.secondInputRef.current.value
}
render () {
return (
<div>
{
/* 2.渲染时，把current.null（inputRef）给这个ref，ref挂载到dom元素上，
//此时null替换成了对应的dom元素 */}
<input type="text" ref={
this.firstInputRef} />
<span> + </span>
<input type="text" ref={
this.secondInputRef} />
<button onClick={
this.onClickAdd}> = </button>
<input type="text" ref={
this.resultInputRef} />
</div>
)
}
}
2. refを使用してクラスコンポーネントのインスタンスを操作し、クラスコンポーネントのメソッドを取得したり、クラスコンポーネントを操作します。
アイデアの流れとコードは次のとおりです（例）。
import React from 'react'
import {
ReactDOM } from 'react-dom'
// 二、通过ref操作类组件实例来获取类组件的方法或者操作类组件
class Form extends React.Component {
constructor(props) {
super(props)
//1.声明ref方法，实际上是得到{current:null}
this.inputRef = React.createRef(null)
}
//3.此时inputRef下的current就是Input类组件实例，因为是Input类实例，
//所以可以使用实例下的方法（onFocus1,此方法有可以聚焦focus()）
onFocus = () => {
this.inputRef.current.focus()
}
render () {
return (
<div>
{
/* 2.渲染时，把current.null（inputRef）给这个ref，
ref挂载到Input类组件实例ref属性上，此时null替换成了类的实例 */}
<Input type="text" ref={
this.inputRef} />
<button onClick={
this.onFocus}>聚焦</button>
</div>
)
}
}
//类组件Input
class Input extends React.Component {
constructor(props) {
super(props)
//4.声明ref方法，实际上是得到{current:null}
this.InputRef = React.createRef(null)
}
onFocus1 = () => {
//6.此时InputRef下的current就是dom元素了，可以直接使用dom元素的聚焦方法了
this.InputRef.current.focus();
}
render () {
return (
<div>
{
/* 5.渲染时，把current.null（InputRef）给这个ref，
ref挂载到dom元素上，此时null替换成了对应的dom元素 */}
<input type="text" ref={
this.InputRef} />
</div>
)
}
}
3. ref を通じて機能コンポーネントを操作する
アイデアの流れとコードは次のとおりです（例）。
import React from 'react'
import {
ReactDOM } from 'react-dom'
// 三、通过ref操作函数式组件
class Form extends React.Component {
constructor(props) {
super(props)
//1.声明ref方法，实际上是得到{current:null}
this.inputRef = React.createRef(null)
}
//4.此时inputRef下的current就是Input函数式组件，
//Input函数式组件可以通过ref拿到dom元素，然后就可以调用真实dom元素聚焦方法
onFocus = () => {
this.inputRef.current.focus()
}
render () {
return (
<div>
{
/* 2.渲染时，把current.null（inputRef）给这个ref，
ref挂载到Iput函数式组件上，此时null替换成了函数式组件 */}
<Input type="text" ref={
this.inputRef} />
<button onClick={
this.onFocus}>聚焦</button>
</div>
)
}
}
//函数式组件,必须使用React.forwardRef()包裹
const Iuput =React.forwardRef((props,ref)=>{
return (
<div>
{
/* 3.渲染时，React.forwardRef()将ref向下传递，传递到函数式组件ref上，
此时null替换成了对应的dom元素 */}
<input type="text" ref={
ref} />
</div>
)
})
親コンポーネントは子コンポーネントのrefを操作し、子コンポーネントのdomを操作します。
