javascript - 如何使用静态变量获取更新的 React 上下文？

Question

因此，我的 ClientContext 具有默认值:

export const defaultContext = {
    test: "Hello"
};

export const UserApplicationContext = React.createContext(defaultContext);

然后在我的子组件中更新这个值:

    contextDefaultData = this.context,
    contextData = {
        ...contextDefaultData,
        test: "New"
        }
    };

<UserApplicationContext.Provider value={contextData}>
    <App/>
</UserApplicationContext.Provider>

现在，问题:在 App 中，我可以通过 UserApplicationContext.Consumer 组件访问更新值，但我不能通过静态访问更新值像这样:

import UserApplicationContext from './UserApplicationContext'
static contextType = UserApplicationContext

因此，this.context 将指向默认值，但不会指向更新后的值。如何在不导出新上下文的情况下访问更新的值？谢谢!

Answer 1

我想这是上下文 api 的限制？

为了访问上下文的最新版本，您必须在提供者的组件树中呈现的组件内部，并且您必须使用 <UserApplicationContext.Consumer> 之类的上下文。或者如果你想使用钩子(Hook)/功能组件，你可以用更好的方式来做，比如 const mostRecentContext = useContext(UserApplicationContext) .

如果您尝试像这样导入上下文并在不通过 .Consumer 消耗它的情况下访问它或 useContext钩子(Hook)，它将始终是传递给 React.createContext() 的任何值.