ChildComponent是一个函数式组件,它使用useImperativeHandle钩子来暴露一个doSomething方法。ParentComponent是父组件,它使用useRef钩子创建了一个ref并将其传递给ChildComponent。当按钮被点击时,父组件通过ref调用子组件的doSomething方法。
react官网对useImperativeHandle和forwardRef的介绍: 调用useImperativeHandle和forwardRef修改组件 (1)useImperativeHandle向父组件暴露focus和onClick方法 (2)父组件调用被forwardRef包裹的组件,并将ref传递给它。 父组件25行打印ref对象:current对象下面就可以拿到刚刚在子组件定义的方法了。
return (<TabPanes childRef={childRef} />) export default Deposit; 1. 2. 3. 4. 5. 6. 7. 在父组件使用子组件的钩子changeBag就是子组件暴露出来的方法 childRef.current.changeBag(newArr); 1. 子组件关键代码 import React, { useState, useImperativeHandle } from 'react'; function Tabans(pr...
react函数式组件之---⽗组件调⽤⼦组件实例⽅法记录函数式⽗组件，调⽤函数式⼦组件实例⽅法 ⽗组件：const Parent = () => { return <Child /> } ⼦组件：const Child = () => { const inputRef = useRef()const focusFun = () => { inputRef.current.focus()} const onClick =...
react函数式组件:父组件调用子组件方法 父组件向子组件传入ref import{ useRef }from'react';importChildrenModalfrom'./ChildrenModal';constparent= () => {constchildrenRef =useRef(null);return(<><ChildrenModalref={childrenRef}/></>); };exportdefaultparent;...