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

Question

我是 React 新手，我在 API 使用

的上下文中遇到问题

React Functional Components

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

我有以下儿童提供者：

我。 ChildHostProviderA

二。 ChildHostProviderB

三。 ChildHostProviderC

四。 ChildHostProviderD

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

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

1. GetAccessToken()
2. 登录()
3. SingOut()

如果我需要在 Child Provider 中实现这些功能，那么在 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");
    }
  }
};

然后在您的提供商中，您将select根据主机名正确运行并将其传递给提供商

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