React 函数式组件的父组件调用子组件方法(hook)
原创
©著作权归作者所有:来自51CTO博客作者codernmx的原创作品,请联系作者获取转载授权,否则将追究法律责任
❤️在繁华中自律,在落魄中自愈❤️
父组件的关键代码
import React, { useState, useEffect, useRef } from 'react';
import TabPanes from './Tabans'; //引入子组件
function Deposit(props) {
const childRef: any = useRef(); //关键部分
//注意这里使用子组件的时候需要childRef={childRef}
return (<TabPanes childRef={childRef} />)
export default Deposit;
在父组件使用子组件的钩子changeBag就是子组件暴露出来的方法
childRef.current.changeBag(newArr);
子组件关键代码
import React, { useState, useImperativeHandle } from 'react';
function Tabans(props) {
const [bag, setBag] = useState([]);
const { childRef } = props
useImperativeHandle(childRef, () => ({
// changeBag 就是暴露给父组件的方法
changeBag: newVal => {
setBag(newVal)
},
}));
return (<div>子组件内容.....</div>)
export default Tabans;
中间省略了一些其他的代码,如果不懂得话可以留言交流哦!!!