#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 и должен иметь компонент, подключенный в конце поставщика, а не только чисто глобальную функцию. Спасибо за ваш ответ.