React Hook 父子组件相互调用函数方式
目录
- React Hook 父子组件相互调用函数
- 1.子组件调用父组件函数方法
- 2.父组件调用子组件函数方法
- React Hook 父子组件传值
- 父组件
- 子组件
React Hook 父子组件相互调用函数
1.子组件调用父组件函数方法
//父组件 let Father=()=>{ let getInfo=()=>{ } return ()=>{ <div> <Children getInfo={getInfo} /> </div> } }
//子组件 let Children=(param)=>{ return ()=>{ <div> <span onClick={param.getInfo}>调用父组件函数</span> </div> } }
子组件调用父组件函数,可以向父组件传参,刷新父组件信息
2.父组件调用子组件函数方法
//父组件 //需要引入useRef import {useRef} from 'react' let Father=()=>{ const childRef=useRef(); let onClick=()=>{ childRef.current.getInfo(); } return ()=>{ <div> <Children ref={childRef} /> <span onClick={onClick}>调用子组件函数</span> </div> } }
//子组件 //需要引入useImperativeHandle,forwardRef import {useImperativeHandle,forwardRef} from 'react' let Children=(ref)=>{ useImperativeHandle(ref, () => ({ getInfo:()=>{ //需要处理的数据 } })) return ()=>{ <div></div> } } Children = forwardRef(Children);
useImperativeHandle 需要配合着 forwardRef 使用,要不就会出现以下警告
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
React Hook 父子组件传值
我司现在技术栈是react,用的是开箱即用的pro,我个人习惯用函数式组件,所以用hook比较多。现在写个父子组件传值的示例,希望能帮助到你。
父组件
import React, { useState,createContext} from "react"; import Counter from './index1' const myContext = createContext(); function App() { const [count, setCount] = useState(0); return ( <div> <h4>我是父组件</h4> <p>点击了 {count} 次!</p> <button onClick={() => { setCount(count + 1); }} > 点我 </button> {/* 关键代码 */} {/* 提供器 */} <myContext.Provider value={count}> <Counter myContext={myContext} /> </myContext.Provider> </div> ); } export default App;
子组件使用useContext ,来获取父级组件传递过来的context值。
子组件
import React, { useContext} from 'react'; // 关键代码 function Counter({myContext}) { const count = useContext(myContext); // 得到父组件传的值 return ( <div> <h4>我是子组件</h4> <p>这是父组件传过来的值:{count}</p> </div> ) } export default Counter;
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)