功能:
点击Child1中的两个按钮,改变Child2、Child3的数据。
目录:
App.js:
import './App.css';
import ContextReducer from './contextReducer/ContextReducer'
function App() {
return (
<ContextReducer />
);
}
export default App;
ContextReducer.js(父组件):
import React, { useReducer } from 'react'
import Child1 from './children/Child1'
import Child2 from './children/Child2'
import Child3 from './children/Child3'
const reducers = (prevState, action) => {
console.log(prevState, action);
let newState = { ...prevState }
switch (action.type) {
case 'changeA':
newState.a = 6
return newState
case 'changeB':
newState.b = 7
return newState
default:
return newState
}
}
const initialStates = {
a: 0,
b: 1
}
export default function ContextReducer() {
const GlobalContext = React.createContext();
const [state, dispatch] = useReducer(reducers, initialStates);
return (
<GlobalContext.Provider value={{
state,
dispatch
}}>
<Child1 GlobalContext={GlobalContext} />
<Child2 GlobalContext={GlobalContext} />
<Child3 GlobalContext={GlobalContext} />
</GlobalContext.Provider>
)
}
Child1(子组件):
import React, {useContext} from 'react'
const Child1 = (props) => {
const {GlobalContext} = props;
console.log(GlobalContext);
const {state, dispatch} = useContext(GlobalContext)
return (
<div>
Child1
<button onClick={() => {
dispatch({type: 'changeA'})
}}>改变a</button>
<button onClick={() => {
dispatch({type: 'changeB'})
}}>改变b</button>
<p>
{state.num}
</p>
</div>
)
}
export default Child1
Child2(子组件):
import React, {useContext} from 'react'
const Child1 = (props) => {
const {GlobalContext} = props;
const {state, dispatch} = useContext(GlobalContext)
return (
<div>
ChildA
<p>
{state.a}
</p>
</div>
)
}
export default Child1
Child3(子组件):
import React, {useContext} from 'react'
const Child1 = (props) => {
const {GlobalContext} = props;
const {state, dispatch} = useContext(GlobalContext)
return (
<div>
ChildB
<p>
{state.b}
</p>
</div>
)
}
export default Child1
运行结果:
初始状态:
点击改变a按钮:
点击改变b按钮: