Как экспортировать переменную useContext без необходимости вызывать useContext для каждого компонента?

#reactjs #react-context #react-functional-component

Вопрос:

Я написал контекст тостов и включил весь проект в поставщика тостов. Если одному из моих компонентов потребуется использовать тосты, он вызовет

 function Component() {  const toast = useToast();  toast.success("")  ... }  

Можно ли в любом случае просто импортировать тосты напрямую, не вызывая useToast() для отдельных компонентов, как показано ниже?

 import { toast } from "./toast-provider.tsx"  function Component() {  toast.success("")  ... }  

Ответ №1:

Я предполагаю, что ваш toast -это что-то вроде <React.createContext().Provider /> .

В этом случае позвонить невозможно toast.attribute , по крайней мере, в моем понимании. Вам придется использовать компонент более высокого порядка для классов, а в вашем случае- useContext крючок или что-то подобное для функциональных компонентов.

Если вы хотите получить доступ к атрибуту toast с точечной нотацией, toast это должен быть, например, объект. Это было бы одной из возможностей для создания контекстов:

 function getAttr2() {  return "some dynamic value"; }  export const toast = {  attribute1: "some attribute",  attribute2: getAttr2() };  

Но это, конечно, не соответствовало бы тому, как React использует контекст.

Комментарии:

1. Мой список использований в основном «экспорт const useToast = () => useContext(ToastContext);». Однако ваше предложение не работает в моем случае, так как мой поставщик тостов использует react-toastitfy и должен иметь компонент, подключенный в конце поставщика, а не только чисто глобальную функцию. Спасибо за ваш ответ.