forwardRef 该怎么用？

Tue, 17 Dec 2024 00:00:00 +0800

React.forwardRef

对于ref转发，官网是这样描述的

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。

想详细了解的可以去看官方文档 Refs 转发 – React (docschina.org)

现在让我们直奔主题吧！

React.forwardRef(render)的返回值是react组件，接收的参数是一个 render函数，函数签名为render(props, ref)，第二个参数将其接受的 ref 属性转发到render返回的组件中。

这项技术并不常见，但在以下两种场景中特别有用:

转发 ref 到组件内部的DOM 节点上
在高阶组件中转发ref

转发 `ref`到组件内部的`DOM`节点

比如我们想要将一个组件内部的某个元素暴露出去, 就可以这么做

// App.js
import React from 'react';
import Foo from './component/Foo';

export default class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {};
 this.input = React.createRef(); // 1
 // ↑5
 }

 handleClick = (e) => {
 const input = this.input.current;
 // 6
 console.log(input);
 console.log(input.value);
 input.focus();
 }

 render() {
 return (
 <>
 <button onClick={this.handleClick}>click to get value</button>
 {/*2*/}
 <Foo ref={this.input}/>
 </>
 )
 }
}

// Foo.jsx
import React from 'react';
 // 3
const Foo = React.forwardRef((props, myRef) => {
 return (
 <div>
 <p>....一些其他节点</p> {/*4*/}
 <input type="text" defaultValue='ref 成功转发到 Foo 组件内部的 input节点上' ref={myRef}/>
 <p>....一些其他节点</p>
 <p>....一些其他节点</p>
 </div>
 );
});

export default Foo;

仔细看代码中标记的数字，这是ref转发的流程:

ForwardRef 该怎么用？ on Last Stand

forwardRef 该怎么用？

React.forwardRef

转发 ref到组件内部的DOM节点

转发 `ref`到组件内部的`DOM`节点