React Hook 父子组件相互调用函数方式

目录ReactHook父子组件相互调用函数1.子组件调用父组件函数方法2.父组件调用子组件函数方法ReactHook父子组件传值父组件子组件ReactHook父子组件相互调用函数1.子组件...

目录

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:()=>{
      //需要处理的数据
    }
  }))
 returjavascriptn ()=>{
  <div></div>
 }
}
Children = forwardRef(Children);

useImperativeHandle 需要配合着 forwardRef 使用，要不就会出现以下警告

Warning: Fwww.cppcns.comunction 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 './jsindex1'
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;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。