Provide

1.module.js

 import React from "react";
// 实例化一个上下文对象
let myContext = React.createContext();
export default myContext;

2.context.jsx

 export default function () {
    let person = {
        name: 'ikun',
        age: 10
    }
    
    return <div>
        {/* vue中 provider inject */} 
        {/* 向子组件提供数据 */}
        <MyContext.Provider value={person}>
        
            {/* 使用插槽 第一种方法：自定义属性的方式 */}
            <Child1 slot={<img width={100} src="https://img2.epetbar.com/common/upload/commonfile/2023/02/09/183145_617651.jpg@!300w-c" />}></Child1>
            
            {/* 使用插槽 第二种方法：内容区传递 */}
            <Child2>
                <h1>我是child2的第一个h1</h1>
                <h1>我是child2的第二个h1</h1>
                <h1>我是child2的第三个h1</h1>
            </Child2>
            
        </MyContext.Provider>
    </div>

}

3.child1,jsx

  import myContext from "../modules/context"
import { useContext } from "react"

  
export default function({slot}) {
    // useContext 接收父组件通过MyContext.Provider 提供的数据
    let value = useContext(myContext);
    console.log(value);

    return <div>
        <h1>child1</h1>
        {slot}
    </div>
}

4.child2.jsx

 import myContext from "../modules/context"
import { useContext } from "react"

export default function({children}) {
    let value = useContext(myContext);
    console.log(value);
    console.log(children);
    return <div>
        <h1>child2--{value.name}--{value.age}</h1>
        {children}
    </div>
}