import React, { useReducer, useContext } from "react";
// 原始值
const initstate = {
btn1: "",
btn2: ""
};
// 创建一个reducer函数来处理 原始值
const reducer = (prevState, action) => {
// 不改变原始state
const state = { ...prevState };
switch (action.type) {
case "btn1":
state.btn1 = action.value;
return state;
case "btn2":
state.btn2 = action.value;
return state;
default:
return prevState;
}
};
// 通过 React.createContext 创建一个全局上下文
const GlobalContext = React.createContext();
function ChildWrap() {
// 使用useReducer将 reducer和initstate结合
const [state, dispatch] = useReducer(reducer, initstate);
// GlobalContext.Provider 向组件内提供value， value里的值是供里面的子组件使用的
return (
<GlobalContext.Provider
value={{
state,
dispatch
}}
>
<Btns />
<Child1 />
<Child2 />
</GlobalContext.Provider>
);
}
function Btns() {
// GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
const { dispatch } = useContext(GlobalContext);
return (
<>
<button
onClick={() => dispatch({ type: "btn1", value: "我被btn1改变了" })}
>
Child1
</button>
<button
onClick={() => dispatch({ type: "btn2", value: "我被btn2改变了" })}
>
Child2
</button>
</>
);
}
function Child1() {
// GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
const { state } = useContext(GlobalContext);
return <p>child1 - {state.btn1}</p>;
}
function Child2() {
// GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
const { state } = useContext(GlobalContext);
return <p>child2 - {state.btn2} </p>;
}
export default function App() {
return <ChildWrap />;
}
hooks中 useReducer和useContext结合实现 跨组件通信
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue2.0与 [百度地图] 结合使用： 1.vue init webpack-simple vue-baidu-...
- https://www.bilibili.com/video/BV15741177Eh?p=64[https://...
- 在前面，小编已经陆陆续续为大家分享了很多知识点，那么今天要为大家分享的是将组件通信和双向绑定结合在一起。这个案...
