标签: react-intl

我正在使用webpack和react-intl构建一个React Webapp。我的应用程序应该是瑞典语和英语。当我在开发模式下构建Web应用程序时，它可以正常工作。

但是，当我构建应用程序并将其作为静态网站运行时，char编码遇到了问题：Ö变成Ö等等。

这可能是加载程序中的错误吗？还是应该从哪里开始解决问题？

我像这样加载翻译文件：

import { IntlProvider, addLocaleData } from 'react-intl';
import formatTranslations from 'utils/formaters/translations-formater';
import en from 'react-intl/locale-data/en';
import sv from 'react-intl/locale-data/sv';
addLocaleData([...en, ...sv]);

import svStrings from 'locales/sv';
import enStrings from 'locales/en';

const strings = { 
  sv: formatTranslations(svStrings),
  en: formatTranslations(enStrings)
};

我正在使用react-intl库进行国际化。在组件内部，我使用injectIntlHOC 来翻译消息键：

import {injectIntl} from 'react-intl';

const Component = props => (
    const message = props.intl.formatMessage({id: 'message.key'});
    // remainder of component omitted
);

export default injectIntl(Component);

如果我不在组件内，是否可以获得消息翻译？

我正在使用 react intl ^2.4.0 版本。我想在已翻译的格式化消息中添加链接。我将它与react cookie 法结合使用

我尝试使用类似的东西：

const link = <a href="google.com">log in</a>;
const msg = `this website uses cookies ${link}`

但没有运气。

const cookieMsg = (
    <FormattedMessage
        id="text"
        defaultMessage="This website uses cookies LINK HERE."
    />
);

在 CookieBanner 中：

<IntlProvider locale={lang} messages={messages[lang]}>
    <>
        <CookieBanner
            message={msg}
            ...
        />
    </>
</IntlProvider>

我直接在 app.js 中渲染。这里是：

<CookieBanner
     message={cookieMsg}
     acceptButtonText={cookieBtn}
     privacyPolicyLinkText={cookiePrivacy}
     policyLink="https://www.google.com"
     showMarketingOption={false}
     showStatisticsOption={false}
     showPreferencesOption={false}
     styles={{
              optionWrapper: {
                  display: "none"
               }
            }}
     />

我正在尝试使用react-intl 来创建本地化验证模式。然而，我能找到的只是与 i18n 的集成。我已经使用react-intl作为我的主要本地化工具；因此，我想继续使用这个工具。是否可以使用react-intl为yup创建一个功能本地化？我正在单独的文件中创建验证模式仅供参考。

感谢您的任何提示

CodeSandbox 问题示例

TLDR：我需要使用本地化验证消息。反应国际。目前我不确定如何传递本地化 ID 并在渲染组件中对其进行翻译。

我一直在努力学习和理解react-intl图书馆，我遇到了babel-plugin-react-intl图书馆。图书馆的页面上有这样的描述；

Extracts string messages for translation from modules that use React Intl.

我想知道会提取哪些字符串消息？

另外，提取的消息有什么好处？

我正在使用react-intl和react-helmet！我正在尝试将元描述作为翻译文本传递给Helmet，但似乎不可能！

这是我所做的：

<Helmet
     meta={[{ name: 'description', content: { id: 'homepage.description'} }]}
     link={[{ rel: 'icon', href: 'favicon/favicon-32x32.png' }]}
/>

这homepage.description是关于的文字lang/en/en.json。

我猜如果翻译可以被抓取并用作变量，那么它就很容易使用，我将这样做：

render() {
    const description = formatMessage({ id: 'homepage.description', values: {country: 'Morocco'} });
    return (
        <Helmet
              title={pageTitle}
              meta={[{ name: 'description', content:  {{description}} }]}
              link={[{ rel: 'icon', href: 'favicon/favicon-32x32.png' }]}
            />
    );
}

如果可能的话？还是请问有没有其他替代方法或最佳实践？

提前致谢

使用redux-form,我尝试使用i18n进行字段级验证.我正在使用react-intl(https://github.com/yahoo/react-intl),所以我尝试了这个:

<Field name="Label" component={renderField} validate={[required(this.props.intl)]}

具有验证功能:

const required = (intl) => (value) => {return value ? undefined : intl.formatMessage({id:"Required"})};

问题:当我的字段标签出现错误时,如果我更改语言,我的字段状态将丢失,我的错误消息将消失.

我认为验证道具的价值不应该在渲染之间改变,因为它会导致字段重新注册.解决办法是什么 ？

如何在Field-Level Validation中正确地将react-intl集成到验证消息中？可能吗 ？

使用react-intl我有以下消息：

serviceFee: {
  en: 'Service fee: ({fee, number, percent})',
  ...
},

当我打电话

<FormatMessage id="serviceFee" values={{ fee: 0.0625 }} />

我希望它呈现：

服务费：6.25％

但是我得到了一个四舍五入的值：

服务费：6％

如何解决这个问题？

几周前，我和同事开始了一个使用 React 前端和 ruby​​ 后端的项目。经过几次代码审查后，有关应用程序未国际化的评论引起了我们的注意。我们有一个使用 i18n gem 的国际化后端，但被告知 React 的标准是使用 React-intl 作为前端国际化包。我刚刚完成了国际化的编码，并使用几种语言对其进行了测试以确保其正常工作。在测试这个话题上，我开始遇到一个我一直在用头撞墙的问题。 我不断收到此错误：n.getChildContext 不是函数。我正在使用enzyme-react-intl包。为了测试这是否有效，我决定只从拍摄我的组件（功能组件和基于类的组件）的快照开始。下面是我的一项测试的示例以及我收到的测试套件失败情况。我所有的测试套件都带有shallowWithIntl和mountWithIntl的测试套件都失败了。我应该注意，我正在使用命令运行测试：\'yarn jest -u\'。从我读过的所有搜索和 api 文档中，我没有做出任何明显的错误，但如果对答案有任何帮助，我将不胜感激。

这是一个测试示例：

import React from \'react\';\nimport { loadTranslation, shallowWithIntl } from \'enzyme-react-intl\';\nimport Header from \'../components/Header/Header\';\nloadTranslation("./app/javascript/translations/en-US.json");\n\ndescribe(\'Parent header rendering\', () => {\n     const shallowHeader = shallowWithIntl(<Header />);\n     it(\'matches the snapshot\', () => {\n         expect(shallowHeader).toMatchSnapshot();\n     });\n});\n

我收到的测试套件错误。

应用程序/javascript/测试失败 /Header.test.jsx\n \xe2\x97\x8f 父标头渲染 \xe2\x80\xba 遇到声明异常

TypeError: n.getChildContext is not a function\n\n   5 …