ForwardRef 该怎么用？

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转发的流程: ...