react18使用useContext举行跨组件传参
contexts.jshttps://i-blog.csdnimg.cn/direct/931c59c08ccd4db4af0dc58d04401d91.png
import { createContext, useState } from "react";
const MyContext = createContext();
const MyContextProvider = ({ children }) => {
const = useState(0);
const setNewValue = (newValue) => {
setValue(newValue);
};
return (
<MyContext.Provider value={{ value, setNewValue }}>
{children}
</MyContext.Provider>
);
};
export { MyContext, MyContextProvider }; 根组件
https://i-blog.csdnimg.cn/direct/9d70d90df3b44355b84daf88b92b04cb.png
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;
父组件
https://i-blog.csdnimg.cn/direct/f69b8de8986a4b4692cabc155bb03643.png
import React from "react";
import Sun from './Sun'
function Son() {
return (
<div>
<Sun/>
</div>
);
}
export default Son;
子组件
https://i-blog.csdnimg.cn/direct/2daa8744b615467192c6f5f5ce8ec3b5.png
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; 注：本人前端小白 ，如有不对的地方还请多多指教
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]