//父組件
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;