微信系统开发技术_ui设计师岗位职责_数字营销工具_关键词搜索引擎优化推广

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;

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