标签: react-intl

我不确定如何从中获取值

<FormattedMessage {...messages.placeholderIntlText} />

像输入一样占位符格式:

<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />

因为它会在实际占位符中返回[Object object].有没有办法获得实际的正确值？

我需要使用ReactJS构建一个多语言应用程序.该应用程序需要不同语言的自定义词典以及日期/时间,数字和货币的自动格式.

从我所看到的有两个非常受欢迎的图书馆:

reac -intl和 react-i18next

一个人和另一个人之间的优势是什么？什么是最受支持和最受欢迎的？

支持多种语言的ReactJS应用程序的一般选择是什么？

面临以下构建问题：

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

请为此提供一些解决方案吗？

编辑:解决了!向下滚动以查找答案

在我们的组件测试中,我们需要他们可以访问react-intl上下文.问题是我们在mount()没有<IntlProvider />父包装的情况下安装单个组件(使用Enzyme ).这可以通过将提供程序包装起来然后将root点指向IntlProvider实例来解决,而不是CustomComponent.

该测试与阵营-国际:酶文档仍然是空的.

<CustomComponent />

class CustomComponent extends Component {
  state = {
    foo: 'bar'
  }

  render() {
    return (
      <div>
        <FormattedMessage id="world.hello" defaultMessage="Hello World!" />
      </div>
    );
  }
}

标准测试案例(所需)(酶+摩卡+柴)

// This is how we mount components normally with Enzyme
const wrapper = mount(
  <CustomComponent
    params={params}
  />
);

expect( wrapper.state('foo') ).to.equal('bar');

但是,由于我们的组件FormattedMessage用作react-intl库的一部分,因此在运行上述代码时会出现此错误:

Uncaught Invariant Violation: [React Intl] …

我最近更新了我的Android Studio和许多组件/ sdk,从那以后React-Intl抱怨intl库丢失,即使它之前工作正常.

我已经安装了intlpolyfill,我将它导入到我的主文件的最顶层App.js.我也导入localeData从react-intl和添加.然后,我在IntlProvider指定locale没有消息的情况下渲染我的视图(我FormattedNumber现在只使用)

这是我的代码的简化版本:

import 'intl';
import { IntlProvider, FormattedNumber, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';

addLocaleData(en);

[...]

render() {
    return (
        <IntlProvider locale="en">
            <Text>
                <FormattedNumber value={123} />
            </Text>
        </IntlProvider>
    )
}

我收到以下错误:

[React Intl]错误格式化编号.ReferenceError:尚未为此对象提供语言环境数据.

我不明白发生了什么.有人遇到同样的问题吗？

谢谢

我试图在 Next.js i18n 中设置我的默认语言，但总是将“En”作为默认语言，称为后备。

我也收到这个错误：

错误：[@formatjs/intl 错误 MISSING_DATA] 缺少区域设置的区域设置数据：Intl.NumberFormat 中的“sq”。使用默认区域设置：“en”作为后备

module.exports = {
    i18n: {
        locales: ['sq', 'en'],
        defaultLocale: "sq",
    }
}

我想知道是否有任何方法可以使用React-Intl访问当前设置的区域设置？

假设我创建了这个:

render() {
  return (
    <IntlProvider locale="en">
      <App>
    </IntlProvider>
  );
}

在App中,我想做这样的事情,以便访问我传递给的语言环境 IntlProvider

this.props.locale

有没有办法做那样的事情？

谢谢.

我正在使用react / redux开发应用程序，并且我开始使用库react-intl格式化消息和日期。

我已经能够在<FormattedDate>标签中显示其使用的时区。

我想选择所有可能存在的时区，所以当用户选择一个时区时，该<FormattedDate>格式会自动更改。

我找不到如何使用react-intl列出所有可能的时区。

我也在google中搜索过，但没有找到任何内置的javascript函数可以做到这一点。

是那样吗 如何获得该清单？

注意：不要以为是同一个问题，因为如果可能的话，我不想使用外部库，如果这是唯一的解决方案，那么我将不得不采用这种方式...：/

我有react-router app并且想添加i18n.在react-intl 示例中,IntlProvider中包含的根组件:

ReactDOM.render(
<IntlProvider locale="en">
    <App />
</IntlProvider>,
document.getElementById('container')

);

但是只有一个区域设置.如何更新应用程序以添加其他语言以及如何存储翻译的最佳方式？

我正在尝试使用 的数字格式化程序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）