标签: react-intl

我需要添加指向我需要翻译的文本的链接。如何格式化具有链接的消息？

现在这就是我想要做的：

const messages = defineMessages({
  copy: {
    id: 'checkout.OrderReview.copy',
    description: 'Label for add card button',
    defaultMessage: 'By clicking the "Place Order" button, you confirm that you have read, understood, and accept our {termsAndConditionsLink}, {returnPolicyLink}, and {privacyPolicyLink}.',
  },
  termsAndConditions: {
    id: 'checkout.OrderReview.termsAndConditions',
    description: 'Label for terms and conditions link',
    defaultMessage: 'Terms and Conditions',
  },
  returnPolicy: {
    id: 'checkout.OrderReview.returnPolicy',
    description: 'Label for return policy link',
    defaultMessage: 'Return Policy',
  },
  privacyPolicy: {
    id: 'checkout.OrderReview.privacyPolicy',
    description: 'Label for privacy policy link',
    defaultMessage: 'Privacy …

我已经查看了react-intl的建议,但它没有留下任何关于酶的明确文档.

这就是我试图编写测试的方法.

import {IntlProvider} from 'react-intl';

const intlProvider = new IntlProvider({locale: 'en'}, {});
const intl = intlProvider.getChildContext();
const customMessage = shallow(<CustomMessage />, { options: { context: intl } });

但我一直在收到错误

不变违规:[React Intl]找不到必需的intl对象.需要存在于组件祖先中.

我查看了他们的回购,他们似乎已经使它与'react-addons-test-utils'一起使用了.

难道我做错了什么？

我有utils.js文件。

export function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        name = 'low';
        break;
    case constants.RISK_CATEGORY_MEDIUM:
        name = 'medium';
        break;
    case constants.RISK_CATEGORY_HIGH:
        name = 'high';
        break;
    case constants.RISK_CATEGORY_CRITICAL:
        name = 'critical';
        break;
    default:
        console.warn('see: /utils/risk.js', 'categoryIdToCategoryName:', categoryId);
        name = 'unknown';
   }
    return name;
}

我想使用https://github.com/yahoo/react-intl翻译这些文本-[低，中，高，关键] 。所以我定义了消息

const translations = defineMessages({
riskLow: {
    id: 'utils.risk.low',
    defaultMessage: 'low',
},
riskMedium: {
    id: 'utils.risk.medium',
    defaultMessage: 'medium',
},
riskHigh: {
    id: 'utils.risk.high',
    defaultMessage: 'high',
},
riskCritical: {
    id: 'utils.risk.critical',
    defaultMessage: …

我有以下翻译：

{count, number} {count, plural, one {Kundenbewertung} other {Kundenbewertungen}}

在 Chrome 中它显示23 Kundenbewertungen得很好，但在 Safari 中它显示翻译字符串并抛出错误

格式化消息时出错：“pdp:product-title: ratings”，区域设置：“de”

无法格式化消息：“pdp：产品标题：评级”，使用消息源作为后备。

在我的 React 组件中，代码如下：

<FormattedMessage
  id="pdp:product-title:ratings"
  values={{ count: product.metadata.rating.count }}
/>

我完全迷失了，因为它在 Chrome 中按预期工作。我使用的语法正确吗？

这是我配置客户端通过react-intl呈现正确语言的方式.

import localeData from './translations/en.json';
//import localeData from './translations/xx.json';  <-- any language

const render = routes => {
  match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
      <HotEnabler>
        <IntlProvider locale={locale} messages={localeData}>
          <Provider store={store} app={app} restApp={restApp} key="provider">
            <Router {...renderProps} render={renderRouter} history={history}>
              {routes}
            </Router>
          </Provider>
        </IntlProvider>
      </HotEnabler>,
      dest
    );
  });
};

render(getRoutes(store));

但是我想根据cookie中的语言环境动态导入localeData.因此,如果我的用户的语言环境是"en",我将只加载en.json文件.

const locale = Cookie.get('locale') || 'en';

const render = routes => {
  match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
      <HotEnabler>
        <IntlProvider locale={locale} messages={localeData}>
          <Provider store={store} …

我正在创建多语言应用程序。我正在使用：React Intl; React Router（最新v4）; Redux。
我的应用程序中的路径将取决于语言环境：

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

如果用户拥有locale = en-US并进入localhost:8080应用，则将其重定向到 localhost:8080/en

如果用户拥有locale = uk并进入localhost:8080应用程序，则显示其对应于地址的组件localhost:8080/而不更改位置路径名。

Routers.jsx

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

目前，它无法正常工作。
我no match在航线配置，如果我进入localhost:8080/或localhost:8080/en。

我试图在反应本机中将数字转换为价格格式。如何将https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat（Intl.NumberFormat）与本机反应一起使用？

是否有任何选项可以显示从数组字符串的翻译？

"app.components.TeaserContent.kooy":["your personal selection.", "outfits styled for you.", "new favourite items.", "your new wardrobe."]

为了

import { defineMessages } from 'react-intl'
export default defineMessages({
  typeText: {
    id: 'app.components.TeaserContent.kooy',
    default: 'dfgdfgdf'
  },

console.log(intl.formatMessage({ ...messages.typeText }))

并在控制台中出现与问题相同的错误

我有一个 monorepo，它公开了一个 TypeScript 模块，它被 React TypeScript 项目消耗和使用。

当模块将任意 React 元素插入到虚拟 DOM 时 - 一切都按预期工作，包括当我尝试使用 React Router 时（最初是有问题的，但我能够修复它）。

但是，当我尝试使用 react-intl, via 时FormattedMessage，出现错误：

Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

当我在控制台日志中看到这一点时，这尤其令人讨厌：

The above error occurred in the <Context.Consumer> component:
    in FormattedMessage
    in h2
    in div
    in Loading (at App.tsx:11)
    in IntlProvider (at App.tsx:8)
    in App (at src/index.tsx:9)
    in StrictMode (at src/index.tsx:8)

（注意IntlProvider包装Loading- 这是使用FormattedMessagewhich can't …

我正在将一个项目从next.js 7迁移到 10。它使用react-intl进行翻译，并且是用 TypeScript 编写的。

在以前的版本我有一个自定义的server.js和处理子路由多语言的目的（/日，/ FR等），在它。在自定义应用程序组件中，通过 getInitialProps，我从req获取语言环境并将其作为道具传递给我的组件。所以整个画面是这样的： 自定义应用程序：

static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const { req } = ctx;
    const { locale, messages } = req || (window as any).__NEXT_DATA__.props;
    const initialNow = Date.now();

    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps, locale, messages, initialNow }
}

render() {
        const { Component, pageProps, locale, messages, initialNow …