React 上下文：嵌套 re-use/enhancement（反模式？）

Question

我想知道创建嵌套上下文提供程序（相同上下文）并逐步扩展数据是否是一种反模式。因此，使用当前上下文并从该点向下 enriching/overriding 它。

这种方法有明显的（我还没有）缺点吗？

是否有我可能遗漏的相关术语，以便搜索更多信息？

为什么

我正在为产品构建一种 ABAC 系统。此访问权限可能会受到可用于特定项目的不同项目的影响。

方法

const AuthContext = React.createContext({});

const AuthContextProvider = ({ children, value }) => {
  const parentAuth = React.useContext(AuthContext);
  const updatedAuth = { ...parentAuth, ...value };

  return (
    <AuthContext.Provider value={updatedAuth}>{children}</AuthContext.Provider>
  );
};

我的用法是这样的

<AuthContextProvider value={{ user }}>
  <SomeConsumingComponent permission="RE_ORDER" />
...    
  <AuthContextProvider value={{ question: question1 }}>
    <SomeConsumingComponent permission="EDIT_TEXT" />
  </AuthContextProvider>
....
  <AuthContextProvider value={{ question:question2 }}>
    <SomeConsumingComponent permission="MODIFY_MEDIA" />
  </AuthContextProvider>
</AuthContextProvider>

当然，消费组件可以出现在更复杂的结构中，我想在更高的可用点添加相关的“额外”数据。

Answer 1

看起来他们正在测试您在此处描述的场景：

https://github.com/facebook/react/blob/2bf4805e4bd63dab45cd7f5e1ad32ef8fed3f6ab/packages/react-reconciler/src/__tests__/ReactNewContext-test.js#L277-L331

请注意，他们正在使用 Provider 中的上下文并改变值（第 286 行）。

因为他们期望有这种用法，所以我看不出有任何理由认为这是一种反模式。

React 上下文：嵌套 re-use/enhancement（反模式？）

React Context: Nested re-use/enhancement (anti-pattern?)

javascript

reactjs

design-patterns

react-context

anti-patterns

为什么

方法