react18使用useContext举行跨组件传参

contexts.js

1. import { createContext, useState } from "react";
3. const MyContext = createContext();
5. const MyContextProvider = ({ children }) => {
6.   const [value, setValue] = useState(0);
7.   const setNewValue = (newValue) => {
8.     setValue(newValue);
9.   };
10.   return (
11.     <MyContext.Provider value={{ value, setNewValue }}>
12.       {children}
13.     </MyContext.Provider>
14.   );
15. };
17. export { MyContext, MyContextProvider };

复制代码

根组件

1. import React from "react";
2. import { MyContextProvider } from "./contexts";
3. import Son from "./pages/Son";
5. function App() {
6.   return (
7.     <div className="App">
8.       <MyContextProvider>
9.         <Son />
10.       </MyContextProvider>
11.     </div>
12.   );
13. }
15. export default App;

复制代码

父组件

1. import React from "react";
2. import Sun from './Sun'
4. function Son() {
5.   return (
6.     <div>
7.       <Sun/>
8.     </div>
9.   );
10. }
12. export default Son;

复制代码

子组件

1. import React,{useContext} from "react";
2. import {MyContext} from '../contexts'
4. function Sun() {
5.   const {value,setNewValue} = useContext(MyContext)
6.   return (
7.     <div>
8.        <button onClick={()=>{setNewValue(value + 1)}}>{value}</button>
9.     </div>
10.   );
11. }
13. export default Sun;

复制代码

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



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。