父包中的react-intl提供商

Question

我有一个react项目"应用"需要另一个包"AppComponents"这反过来又要求"ui";包。

App (has Intlprovider) =>AppComponents (useIntl works) =>UI (useIntl不工作)

我在"应用程序"中添加了Intl提供商，当我使用钩子时，"使用Intl";在"AppComponents"包装，它工作良好。但当我在ui中使用钩子时包，它不工作，说没有提供程序:

Uncaught Error: [React Intl] Could not find requiredintlobject。需要存在于组件祖先中。

我用:

react-intl v6.0.4

反应v18.0.0

节点v18.0.0

npm v8.6.0

"App"

import { useMemo, useState, createContext } from 'react';
import { IntlProvider } from 'react-intl';
import { ReactNode } from 'react';
import { MessageFormatElement } from 'react-intl';
export type TTranslationData = Record<string, string> | Record<string, MessageFormatElement[]>;
export interface II18nContext {
locale: string;
setLocale: (newLocale: string) => void;
setTranslation: (data: TTranslationData) => void;
}
export interface II18nProviderProps {
children: ReactNode;
}
const I18nContext = createContext<II18nContext | null>(null);
function I18nProvider({ children }: II18nProviderProps) {
const [locale, setLocale] = useState(navigator.language);
const [message, setMessage] = useState<TTranslationData | Record<string, never>>({});
const value = useMemo(
() => ({
locale,
setLocale,
setTranslation: (data: TTranslationData) => setMessage(data),
}),
[locale],
);
return (
<I18nContext.Provider value={value}>
<IntlProvider locale={locale} messages={message}>
<App />
</IntlProvider>
</I18nContext.Provider>
);
}

"UI"包(不工作):

import { useIntl } from 'react-intl';
...
function Searchbar(props: SearchbarProps) {
const intl = useIntl();
...
return (
...
{intl.formatMessage({
id: 'searchbar.placeholder',
description: 'React UI search bar placeholder',
defaultMessage: 'Search',
})}
...
);
...
}

任何帮助都将非常感激。

Answer 1

我不知道为什么，但它现在工作后，我删除了vite缓存和使用npm链接。非常奇怪，但是当使用windows开发时有什么新的:p