标签: react-intl

我正在尝试使用 的数字格式化程序Intl，它在 iOS 上完美运行，并且当调试器连接到 iOS 或 Android 时，但由于 Android 中的 JSC 过时，仅在没有连接调试器的情况下在 Android 上失败。

经过一番研究，我发现了两种可能的解决方案：

• 使用Intlpolyfill
• 在 Android 中使用自定义 JSC

Intl在安装intl和react-intl使用纱线后，我首先像这样尝试了polyfill ：

//in my app's index.js
if (!global.Intl) {
    global.Intl = require('intl');
}

虽然它仍然说ReferenceError: Can't find variable: Intl。

然后我放弃并尝试包含自定义 JSC（我已经确认正确引用了自定义 AAR），尽管我仍然遇到相同的错误。无论我做什么，我都无法Intl在没有附加调试器的情况下在 Android 上运行。

我究竟做错了什么？（我使用的是 React Native 0.59.9）

如果我错了请纠正我,ReactIntl​​中的FormattedMessage返回一个由span标签包装的字符串.在ReactIntl​​ 1.2中,我们可以选择this.getIntlMessage('key')仅使用字符串部分.

这是我的问题:在ReactIntl​​ 2.0中是否有相同的功能？我知道可以通过使用FormattedMessage中的Function-As-Child模式获得字符串

<FormattedMessage id="placeholder">
    {(formattedValue)=>(
        <MyComponent ref="mycomponent" placeholder={formattedValue}/>
    )}
</FormattedMessage>

但是,它会混淆我的组件中的'ref',我无法再使用该组件this.refs.mycomponent了.

我在我的应用程序中支持多种语言,并为此使用React-intl.我有Redux中间件,我在那里调用服务器,如果出现错误,我想在UI上显示错误.

我知道我可以这样做:

1)使用消息密钥从中间件调度操作:

{type: SHOW_ERROR, message: 'message_error_key'}

2)在我的React组件中使用:

<FormattedMessage id={this.props.message_error_key}/>

但有没有办法从中间件发送已翻译的消息的动作？

{type: SHOW_ERROR, message: [translated_message_should_be_here]}

我正试图弄清楚如何使用React-Intl更改语言.这是我的第一个React App,它是用create-react-app制作的,我没有使用Redux和Flux.

在我的index.js中,我有以下代码:

import React from 'react';
import ReactDOM from 'react-dom';
import TodoApp from './components/TodoApp';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

// Bootstrap CSS libraries
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import { IntlProvider, addLocaleData } from 'react-intl';
import intlEN from 'react-intl/locale-data/en';
import intlES from 'react-intl/locale-data/es';
import intlMessagesES from './i18n/locales/es.json';
import intlMessagesEN from './i18n/locales/en.json';

addLocaleData([...intlEN, ...intlES]);

/* Define your translations */
let i18nConfig = {
    locale: 'es',
    messages: intlMessagesES
};

let changeLanguage = (lang) => {
    i18nConfig = { locale: lang, messages: …

我想使用react-intl API的formatMessage函数将消息作为占位符插入,但我无法找到访问此函数的正确方法.

这是我的简化版本:

//index.tsx
<IntlProvider locale={`fr-FR`} messages={messages_fr}>
    <NameForm/>
</IntlProvider>,

//nameForm.tsx
interface NameFormProps {
   intl?: InjectedIntlProps,
}

export default injectIntl(NameForm);

class NameForm extends React.Component<NameFormProps, {}> {

render() {
    let namePlaceholder = this.props.intl.formatMessage(
        {id: "NAME_PLACEHOLDER",
        defaultMessage: "name"
    });

    return (
        <form>
            <input placeholder={namePlaceholder} type="text"/>
        </form>
    );
}

我使用InjectedIntlProps作为intl prop的类型,因为IntlShape似乎没有提供formatMessage方法.

我添加了？到了intl prop,因为我一直有"Property'intl'缺失"(但是不是injectIntl​​应该返回没有这个prop的组件吗？)

现在它编译,但在运行时我得到一个错误("无法读取未定义的属性'displayName'"我猜因为默认导出没有明确的名称).

我觉得我没有朝着正确的方向前进,但找不到任何打字稿/ 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.当我使用它时<FormattedMessage id='importantNews' />,它是完美的.但是,当我使用以下代码时intl.formatMessage(),它不起作用并抛出一些错误.我不知道它有什么问题.

import { injectIntl, FormattedMessage } from 'react-intl';

function HelloWorld(props) {
  const { intl } = props;
  const x = intl.formatMessage('hello') + ' ' + intl.formatMessage('world'); //not working
  const y = <FormattedMessage id='hello' />; //working
  return (
    <button>{x}</button>
  );
}

export default injectIntl(HelloWorld);

我的根组件是这样的,

import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import taLocaleData from 'react-intl/locale-data/ta';

import HelloWorld from './hello-world';

addLocaleData([
  ...enLocaleData,
  ...taLocaleData
]);

const …

我正在尝试react-intl在应用程序中使用包.应用程序在服务器上呈现,因此我编写了一些代码来确定使用和服务的语言IntlProvider.

翻译在messages.js文件中提供,它们看起来像这样:

export default {
  en: {
    message: '...some message',
    nested: {
      anotherMessage: '...another message',
    }
  }
  de: {
    // ...
  }
}

我做的是这样的:

// import messages from './messages.js'
// Check the locale for the user (based on cookies or other things)
const locale = ...
// Get the required messages
const messagesForLocale= = messages[locale];
// Supply the messages to the IntlProvider
<IntlProvider locale={locale} messages={messagesForLocale}>
  // ...
</IntlProvider>

然后,当我使用FormattedMessage组件时,我无法使用如下anotherMessage代码访问嵌套的message():

<FormattedMessage …

我有一条如下所示的错误消息：

Could not retrieve data: ${e}

如何将其转换为可以接受此错误参数的 definedMessage？

一个标准的definedMessage：

    const messages = defineMessages({
     dataError: {
         id: 'data.error',
         defaultMessage: 'Could not retrieve data: [default message]'
     }
   })

谢谢！

在我们的项目中，我们react-intl用于国际化。我们正在使用jest作为测试框架，我们决定将我们的单元测试实用程序库从酶移到react-testing-library. 不过现在，既然没有浅渲染，就得<IntlProvider ... />自己在测试中提供，没问题。但即使我这样做，当测试终端说Invalid hook call. Hooks can only be called inside of the body of a function component但当我在本地运行项目时，没有错误只是按预期正常运行。PS 在测试中，Apollo provider 工作正常。

FirstNameFor.test.tsx

import { IntlProvider } from 'react-intl';
import { createMockClient } from 'mock-apollo-client';
import { ApolloProvider as ApolloProviderHooks } from '@apollo/react-hooks';
import { ApolloProvider } from 'react-apollo';

const wrapper = (mockProps, mockClient) => {
  return (
    <ApolloProvider client={mockClient}>
      <ApolloProviderHooks client={mockClient}>
        <IntlProvider locale="en">
          <FirstNameForm
            handleNext={mockProps.handleNext}
            onboardingState={mockProps.onboardingState}
            setHelpContent={mockProps.setHelpContent}
            updateOnboardingState={mockProps.updateOnboardingState}
          /> …