Question

我是新来的人，在使用Context API时遇到了问题

反应功能组件

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

我有以下儿童提供者：

i。 ChildHostProviderA

ii。 ChildHostProviderB

iii。 ChildHostProviderC

iv。 ChildHostProviderD

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

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

GetAccessToken（）
SignIn（）
SingOut（）

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

我尝试过在线查找许多资源，但找不到任何资源，有关这种情况的任何帮助都是非常有用的。

Answer 1

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

如果是这种情况，则无需在此逻辑中包含上下文，因为对于主机它永远不会改变。它比React更与Javascript相关。

您可以创建一个名为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>
  );
}

以下是一个显示此代码的代码箱：https://codesandbox.io/s/authentication-logic-change-according-to-host-759ee?file=/src/UserProvider.js:156-329

如何从React中的父上下文提供者定义子上下文提供者中的功能？

1 个答案: