Question

我发现了这个问题，它将所有上下文更改功能添加到了最顶层的父级，从而解决了这个问题。 React Context api - Consumer Does Not re-render after context changed

但这很尴尬，我想要在更改上下文的组件中更改上下文的函数。假设我有一个按钮可以更改内容中的某些内容，我想在该组件中使用handleChange（），而不是用不属于该函数和状态的父项来阻塞我的父项。

是否可以将上下文逻辑外包给组件？

Answer 1

如果您不希望父级具有状态和状态更改功能，只需不要使用上下文-听起来您正在寻找本地component state。

Answer 2

是的，您需要使用useReducer。 https://reactjs.org/docs/hooks-reference.html#usereducer

您可以在reducer的帮助下创建一个useReducer，并将其传递到Context中。之后，您可以使用state和dispatch来连接到上下文的任何组件。

链接：

Answer 3

context只是传递props而不用担心层次结构的一种幻想技术。

与普通props相比，将数据流去耦是唯一的区别。因此，更改context的值会带来一些警告。

当您需要更改父母与孩子之间的共享状态时，需要提升状态并传递一种更改状态。与context没什么不同

假设以下提供者沿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>
    )
}

您仍然需要传递处理程序以更改状态。要从theme（Component的后代）内部更改ThemeProvider，您可以这样做

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>
}

通常（不一定）在顶级组件Providers中声明App.js

//App.js
import { ThemeProvider } from './ThemeProvider'

const App = () =>{
    <ThemeProvider>
         <RestOffYourApp />
    </ThemeProvider>
}

如何在使用者而不是提供者中更改上下文？

3 个答案: