父包中的react-intl提供程序

Question

我有一个react项目"App“，它需要另一个包"AppComponents”，而后者又需要"UI“包。

应用程序(有Intlprovider) => AppComponents (useIntl works) => UI (useIntl不工作)

我在"App“中添加了Intl提供程序，当我在"AppComponents”包中使用钩子“AppComponents”时，它工作得很好。但是，当我在"UI“包中使用这个钩子时，它不起作用，说没有提供者：

未明错误: React无法找到所需的intl对象。需要在组件祖先中存在。

我在用：

react intl v6.0.4

反应v18.0.0

节点v18.0.0

npm v8.6.0

“应用程序”：

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