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

//父组件
let Father=()=>{
    let getInfo=()=>{
        
    }
    return ()=>{
        <div>
            <Children 
                getInfo={getInfo}
            />
        </div>
    }
}

//子组件
let Children=(param)=>{
    return ()=>{
        <div>
            <span onClick={param.getInfo}>调用父组件函数</span>
        </div>
    }
}

//父组件
//需要引入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);

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;

import React, { useContext} from 'react';
// 关键代码
function Counter({myContext}) {
    const count = useContext(myContext);  // 得到父组件传的值
    return (
        <div>
            <h4>我是子组件</h4>
            <p>这是父组件传过来的值：{count}</p>
        </div>
    )
}
export default Counter;