甘孜州住房和城乡规划建设局网站,上海外贸仓储公司,百元建站,外贸soho是什么意思可以跨组件传值
其实主要的就是三步
1、const xxx React.createContext();创建一个context
2、xxx.Provider value{{ num, setNum }}父组件设置要传递的值
3、const { num, setNum } React.useContext(xxx);子组件下使用
特点#xff1a;
1、可以有多个xxx.Pr…可以跨组件传值
其实主要的就是三步
1、const xxx React.createContext();创建一个context
2、xxx.Provider value{{ num, setNum }}父组件设置要传递的值
3、const { num, setNum } React.useContext(xxx);子组件下使用
特点
1、可以有多个xxx.Provider
2、可以跨组件传递
3、可以传递多个值
store.js
import React from react
const myContext React.createContext(null);
export {myContext};App.js
import { myContext } from ./store;
import React, { useState } from react;
import Child from ./child1;
import Child2 from ./child2;
const App () {const [num, setNum] useState(0);const [count, setCount] useState(100);return (// 相当于是传了一个函数和属性过去第一个{}是// jsx语法第二个是对象对象中含有俩属性myContext.Provider value{{ setNum, num }}Child/Child/myContext.ProvidermyContext.Provider value{{ setCount, count }}Child2/Child2/myContext.Provider/);
};export default App;
child2.js
import React, { useContext } from react
import { myContext } from ./store;
export default function Child2() {const {count,setCount} useContext(myContext);return (divdiv我是另一个儿子组件/divh1{count}/h1buttononClick{() {// 使用setNum的方式 setCount((prev) prev 1);}}添加/button/div)
}child1.js
import { myContext } from ./store;
import React, { useContext} from react;
import GrandSon from ./grandSon;const Child (props) {const { setNum, num } useContext(myContext);return (div我是儿子组件/divh1{num}/h1buttononClick{() {// 使用setNum的方式 setNum((prev) prev 1);}}添加/buttonGrandSon num{num} //);
};export default Child;grandSon.js(第一个孩子的子组件)
import { myContext } from ./store;
import React, { useContext } from react;const GrandSon (props) {const { setNum, num } useContext(myContext);return (h1我是孙子组件/h1h1{num}/h1buttononClick{() {setNum((prev) prev 1);}}添加/button/);
};export default GrandSon;1.当添加添加按钮时数据是同步变化的 2.被另一个xxx.Provider包裹的子组件的数据是不受影响的其数据是单独变化的。
