React中父组件如何调用子组件的方法?useImperativeHandle就够了_百度...

发布网友发布时间：2024-09-25 21:51

我来回答

共1个回答

热心网友时间：2024-10-03 14:21

在React中要实现父组件对子组件的方法调用，离不开对React.forwardRef与useImperativeHandle的理解。如果想直达使用方法，直接看第二点就可以了。如果想要理解透彻，请从开头看起。

1、React.forwardRef：实现ref属性转发

React.forwardRef会创建一个React组件，能将其自身的ref属性转发给其后代组件。

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

转发refs到DOM组件

在高阶组件中转发refs

React.forwardRef接受一个渲染函数（可理解为一个组件）作为参数。这个函数的参数是props和ref，返回React节点。

constFancyButton=React.forwardRef((props,ref)=>(<buttonref={ref}className="FancyButton">{props.children}</button>));//以下这个ref直接指向<button>。//YoucannowgetarefdirectlytotheDOMbutton:constref=React.createRef();<FancyButtonref={ref}>Clickme!</FancyButton>;

在上述的示例中，React会将<FancyButtonref={ref}>元素的ref作为第二个参数传递给React.forwardRef函数中的渲染函数。该渲染函数会将ref传递给元素。即：FancyButton中的ref传给forwardRef中的ref参数，进而再传给button的ref。

画个图帮助理解：

FancyButton的ref——>FancyButton定义时的forwraRef((props,ref))——><buttonref='ref'>

因此，当React附加了ref属性之后，ref.current将直接指向<button>这个DOM元素实例。

2、useImperativeHandle：将ref的实例传递给父组件。

上面讲述了ref的传递，那么我们这里讲一下如何将子组件的属性、方法传给父组件。

useImperativeHandle(ref,createHandle,[deps])

useImperativeHandle应当与forwardRef一起使用，自定义组件FancyInput，如下：子组件：

importReact,{useRef,useState,useImperativeHandle}from'react';functionFancyInput(props,ref){constinputRef=useRef();useImperativeHandle(ref,()=>({focus:()=>{inputRef.current.focus();}}));return<inputref={inputRef}.../>;}//等同于constFancyInput=React.forwardRef((props,ref){...})FancyInput=forwardRef(FancyInput);

这样写之后，渲染FancyInput?的父组件就可以直接调用inputRef.current.focus()。父组件：

constfanRef=React.useRef();functionhandleClick(){//在这里调用子组件的实例方法。fanRef.current.focus();}<FatherCompoent><FancyInputref={fanRef}/><buttononClick={handleClick}>Focustheinput</button></FatherCompoent>

本文主要参考React中文网，根据自己的理解加以总结。

如有帮助到您，请三连支持一下，欢迎留言。如有不同意见，可在评论区指出，谢谢~

原文：https://juejin.cn/post/7103749617308663816

热心网友时间：2024-10-03 14:20