c 网站开发 视频教程软件公司

可以跨组件传值

其实主要的就是三步

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.Provider><myContext.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 (<div><div>我是另一个儿子组件</div><h1>{count}</h1><buttononClick={() => {// 使用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>我是儿子组件</div><h1>{num}</h1><buttononClick={() => {// 使用setNum的方式 setNum((prev) => prev + 1);}}>添加</button><GrandSon 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>我是孙子组件</h1><h1>{num}</h1><buttononClick={() => {setNum((prev) => prev + 1);}}>添加</button></>);
};export default GrandSon;

1.当添加添加按钮时数据是同步变化的；
2.被另一个xxx.Provider包裹的子组件的数据是不受影响的，其数据是单独变化的。