react18使用useContext进行跨组件传参

contexts.js

import { createContext, useState } from "react";

const MyContext = createContext();

const MyContextProvider = ({ children }) => {
  const [value, setValue] = useState(0);
  const setNewValue = (newValue) => {
    setValue(newValue);
  };
  return (
    <MyContext.Provider value={{ value, setNewValue }}>
      {children}
    </MyContext.Provider>
  );
};

export { MyContext, MyContextProvider };

根组件

import React from "react";
import { MyContextProvider } from "./contexts";
import Son from "./pages/Son";

function App() {
  return (
    <div className="App">
      <MyContextProvider>
        <Son />
      </MyContextProvider>
    </div>
  );
}

export default App;

父组件

import React from "react";
import Sun from './Sun'

function Son() {
  return (
    <div>
      <Sun/>
    </div>
  );
}

export default Son;

子组件

import React,{useContext} from "react";
import {MyContext} from '../contexts'

function Sun() {
  const {value,setNewValue} = useContext(MyContext)
  return (
    <div>
       <button onClick={()=>{setNewValue(value + 1)}}>{value}</button>
    </div>
  );
}

export default Sun;

注：本人前端小白 ，如有不对的地方还请多多指教