Как определить функции в поставщике дочернего контекста из поставщика родительского контекста в React? - PullRequest
Новая
       59

Как определить функции в поставщике дочернего контекста из поставщика родительского контекста в React?

0 голосов
/ 03 августа 2020

Я новичок в реакции, и я столкнулся с проблемой в Context API, используя

React Functional Components

Например, у меня есть сценарий, в котором мне нужно разделить провайдеров аутентификации на основе хоста, поскольку все они имеют разные способы аутентификации logi c.

У меня есть следующие дочерние провайдеры:

я. ChildHostProviderA

ii. ChildHostProviderB

iii. ChildHostProviderC

iv. ChildHostProviderD

Мне нужно переключить провайдеров аутентификации с родительского провайдера в зависимости от того, где находится приложение.

Я создал общий c Поставщик контекста (ParentHostProvider ), который будет переключаться в зависимости от хоста, на котором он находится. Общий c поставщик контекста будет иметь следующие функции:

  1. GetAccessToken ()
  2. SignIn ()
  3. SingOut ()

Если мне нужно, чтобы эти функции были реализованы в дочерних провайдерах, что лучше всего сделать в React?

Я пытался найти много ресурсов онлайн, но не смог найти, любая помощь по этому сценарию будет действительно полезна.

1 Ответ

0 голосов
/ 04 августа 2020

Если я правильно понимаю, приложение развертывается на разных хостах, а лог c аутентификации изменяется в зависимости от хоста.

Если это так, вам не нужно включать контекст в это logi c, так как он никогда не изменится для хоста. Это больше связано с Javascript, чем с React.

Вы можете создать файл с именем authenticationFunctions.js со всеми вашими различными функциями logi c , упорядоченными по имени хоста . Примерно так: 

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

...