如何在 React 中从父上下文提供者定义子上下文提供者中的函数？

Question

我是新手，我在使用 Context API 时遇到问题

React 函数式组件

例如，我有一个场景，我需要根据主机拆分身份验证提供程序，因为它们都有不同的身份验证逻辑方式。

我有以下子提供者：

我。 ChildHostProviderA

二。 ChildHostProviderB

三。 ChildHostProviderC

四。 ChildHostProviderD

我需要根据应用程序的位置从父提供者切换身份验证提供者。

我所做的是创建了一个通用上下文提供程序 (ParentHostProvider)，它将根据它所在的主机进行切换。通用上下文提供程序将具有以下功能：

1. GetAccessToken()
2. 登录()
3. 唱出()

如果我需要在子提供者中实现这些功能，那么在 React 中最好的方法是什么？

我尝试在网上找到很多资源，但找不到，任何有关此场景的帮助都会非常有帮助。

Answer 1

如果我理解正确的话，应用程序部署在不同的主机上，并且身份验证逻辑会根据主机而变化。

如果是这种情况，您不需要在此逻辑中涉及上下文，因为对于主机来说它永远不会改变。它与 Javascript 的关系比 React 更重要。

您可以创建一个名为authenticationFunctions.js 的文件，其中包含所有不同的功能逻辑按主机名组织。像这样：

export default {
  "host1.dev": {
    getAccessToken: () => {
      console.log("host1 get access token");
    },
    signIn: () => {
      console.log("host1 sign in");
    },
    signOut: () => {
      console.log("host1 sign out");
    }
  },
  "759ee.codesandbox.io": {
    getAccessToken: () => {
      console.log("codesandbox.io get access token");
    },
    signIn: () => {
      console.log("codesandbox.io sign in");
    },
    signOut: () => {
      console.log("codesandbox.io sign out");
    }
  }
};

然后在您的提供者中，您将根据主机名选择正确的功能并将其传递给提供者

import React, { useContext } from "react";
import authenticationFunctions from "./authenticationFunctions";
const UserContext = React.createContext(null);

const hostname = window.location.hostname;
let funs = authenticationFunctions[hostname];
if (!funs) {
  console.error("There is no authenticationFunctions for this host");
}

export default function UserProvider({ children }) {
  return (
    <UserContext.Provider value={funs || {}}>{children}</UserContext.Provider>
  );
}

这是一个演示此的 Codesandbox：https://codesandbox.io/s/authentication-logic-change-according-to-host-759ee?file=/src/UserProvider.js:156-329