使用场景：
深层次组件传值（父组件传值给子子孙孙...组件）
1.父组件传值给直接子组件，子组件可以通过props进行接收，如下方：
import React, { useState } from 'react';
// 定义一个Son的子组件
const Son = (props: any) => {
return <div>我是子组件：{props.paramsFromParent}</div>;
};
// 定义一个Parent的父组件
const Parent = () => {
const [params, setParams] = useState('我是父组件传过来的值'); // 初始化给params一个初始值'我是父组件传过来的值'
return (
<>
<div>我是父组件</div>
<Son paramsFromParent={params} />
</>
);
};
export default Parent;
运行结果
2.如果父组件要传值给更深层次的子孙组件，则需要用到React中的Hook：useContext()
（1）useContext 的参数必须是 context 对象本身；
（2）当距离Child组件(即接收useContext内容的组件)上层最近的那个<LuckMoney.Provider>更新时，useContext()这个hook会重渲染，并将最新的那个context值(1000元)传递给Child组件。
import React, { useState, useContext } from 'react';
// 定义一个过年红包,里面装了0元==================关键代码==================
let LuckMoney = React.createContext('0元');
// 定义一个Grandson的孙组件
const Grandson = () => {
// ==================关键代码==================
let myMoney = useContext(LuckMoney);// 用来接收最新的LuckMoney的值
return <div>我是孙组件，爷爷给了我一个大红包：{myMoney}</div>;
};
// 定义一个Child的子组件
const Child = () => {
return (
<>
<div>我是子组件</div>
<Grandson></Grandson>
</>
);
};
// 定义一个Parent的父组件
const Parent = () => {
const [money, setMoney] = useState('1000元');
return (
<>
<div>我是父组件</div>
{/* ==================关键代码================== */}
{/* 负责去提供最新的LuckMoney */}
<LuckMoney.Provider value={money}>
<Child />
</LuckMoney.Provider>
</>
);
};
export default Parent;
运行结果
