[英]How to change context in Consumer instead of Provider?
I found this question which answers to this problem with adding all context change functions to the topmost parent.我发现这个问题通过将所有上下文更改功能添加到最顶层的父级来回答这个问题。 React Context api - Consumer Does Not re-render after context changed
反应上下文 api - 上下文更改后消费者不重新渲染
But this is awkward, I want the functions that change the context in the components that change it.但这很尴尬,我想要在改变它的组件中改变上下文的函数。 Let's say I have a button that changes something in the content, I want to have the handleChange() in that component instead of clogging my parent with functions and states that don't belong there.
假设我有一个按钮可以更改内容中的某些内容,我希望在该组件中有 handleChange(),而不是用不属于那里的功能和状态阻塞我的父级。
Is this possible to outsource context logic to components?这是否可以将上下文逻辑外包给组件?
If you don't want the parent to have state and state-altering functions, just don't use context - it sounds like local component state is all you are looking for.如果您不希望父级具有 state 和状态更改功能,请不要使用上下文- 听起来本地组件 state就是您要寻找的全部。
Yes, you need use useReducer.是的,您需要使用 useReducer。 https://reactjs.org/docs/hooks-reference.html#usereducer
https://reactjs.org/docs/hooks-reference.html#usereducer
You create a single reducer
with the help of useReducer
and pass it into Context
.您在
useReducer
的帮助下创建了一个reducer
并将其传递给Context
。 After that, you can use state
and the dispatch
from any component that is connected to the context.之后,您可以使用
state
以及从连接到上下文的任何组件的dispatch
。
Links:链接:
context
is a just a fancy technique of passing props
without worring about hierarchy. context
只是一种无需担心层次结构即可传递props
的奇特技术。
Decoupling the data flow is the only differential when comparing with normal props
.与普通
props
相比,数据流解耦是唯一的区别。 So changing the value of a context
comes with the some caveats.因此,更改
context
的值伴随着一些注意事项。
When you need to change a shared state between parent and child you need to lift your state up and pass down a way of changing it.当您需要更改父母和孩子之间共享的 state 时,您需要抬起 state并传递更改它的方法。 With
context
is no different与
context
没有什么不同
Assume the following provider which pass down a theme
and a way of chage it假设以下提供者传递一个
theme
和一种改变它的方式
export const context = createContext()
const { Provider } = context
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState({ color: 'foo' })
const value = { theme, setTheme }
return (
<Provider value={value}>
{children}
</Provider>
)
}
You still need to pass down a handler to change the state.您仍然需要传递一个处理程序来更改 state。 To change
theme
from inside a Component
(which is descendent of ThemeProvider
) you can do like this要从
Component
(它是ThemeProvider
的后代)内部更改theme
,您可以这样做
import { useContext } from 'react'
import {context} from './ThemeProvider'
const Component = () =>{
const {theme, setTheme} = useContext(context)
const handleChange = () => setTheme({color:'blue'})
return <button onClick={handleChange}>Change</button>
}
Usually (not necessarily) Providers
are declared in the top-level component App.js
通常(不一定)
Providers
在顶级组件App.js
中声明
//App.js
import { ThemeProvider } from './ThemeProvider'
const App = () =>{
<ThemeProvider>
<RestOffYourApp />
</ThemeProvider>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.