- React.forwardRef 允许某些组件接收 ref(ref 是为了获取某个节点的实例),并将其向下传递给 子组件
- React.forwardRef的API中ref必须指向dom元素而不是React组件
forwardRef 与 Hook useImperativeHandle
useImperativeHandle 在使用 ref 时可以自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef一起使用:
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
没使用Hook useImperativeHandle时的代码
const ForwardInput = React.forwardRef((props, ref) => (
<input ref={ref} />
));
class TestComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef(); // 创建 ref 存储 textRef DOM 元素
}
componentDidMount() {
this.inputRef.current.value = 'forwardRef'
}
render() {
return ( // 可以直接获取到 ForwardInput input 的 ref:
<ForwardInput ref={this.inputRef}>
)
}
}