标签: react-intl

如何使用react-intl 2.0和redux在应用程序中使用injectintl和connect.查看我的代码的最后两行,并告诉我这样做的正确方法是什么.

import React from 'react';
import { deleteTodo } from '../actions/todoActions';
import { connect } from 'react-redux';
import {
    injectIntl,
    FormattedRelative,
    FormattedNumber
} from 'react-intl'; 

class TodoItem extends React.Component {
    working() {
        console.log('well it\'s working');
    }

    render() {
        return (<p className="light" key={this.props.index}>
                    {this.props.todo} &nbsp;&nbsp;<a className="red-text text-accent-3" href="#" onClick={e => 
                    {
                        this.props.dispatch(deleteTodo(this.props.index))
                    }}>x</a>
                </p>);
    }
}

function mapStateToProps() {
  return {

  }
}


let injectedIntl = injectIntl(TodoItem);
export default connect(mapStateToProps, null, null, {withRef: true})(injectedIntl);

我尝试此代码时返回错误

react-intl版本3.1.6 && react版本16.9

import { IntlProvider, FormattedMessage , addLocaleData} from 'react-intl';

我想本地化我的组件.我使用yahoo/react-intl lib.我定义了一些消息

const messages = defineMessages({
    greeting: {
        id: 'app.home.greeting',
        description: 'Message to greet the user.',
        defaultMessage: 'Hello!'
    },
  });

我不知道如何为消息定义可本地化的文本,所以我得到了这个错误

app.js:27785[React Intl] Missing message: "app.home.greeting" for locale: "nl", using default message as fallback.

使用示例

<input type="text" {...firstName} placeholder={intl.formatMessage(messages.greeting)} />

有谁知道如何定义本地化的消息？使用defineMessages看起来不可能这样做.提前致谢.

const spy = jest.spyOn(CardResult.prototype, 'expandAnswers');

const wrapper = mount(
<IntlProvider locale="en">
  <Provider store={store}>
    <CardResult
      data={data}
      answers={answers}
      votedStatus
      single
      dataCondition="style1"
    />
  </Provider>
</IntlProvider>
);

wrapper.find('#cardresultbutton1').simulate('click');
wrapper.update();
expect(spy).toHaveBeenCalled();

我正在尝试测试React组件方法。但我得到以下错误。请帮忙。

TypeError：无法读取未定义的属性“ _isMockFunction”

我正在尝试react-intl向我的应用程序添加本地化。像这样

<FormattedHTMLMessage id="marker.title" values={{
        name: (b.name !== null ? b.name : "Bench"),
        seats: Tools.showValue(b.seats),
        material: Tools.showValue(b.material),
        color: Tools.getColorNameFromInt(b.color),
        lat: b.lat,
        lng: b.lng,
    }}/>

但我需要一个字符串所以我试过这个

const title = this.props.intl.formatMessage({
    id: "marker.title",
    values: {
        name: (b.name !== null ? b.name : "Bench"),
        seats: Tools.showValue(b.seats),
        material: Tools.showValue(b.material),
        color: Tools.getColorNameFromInt(b.color),
        lat: b.lat,
        lng: b.lng,
    }
});

我收到以下错误消息：

Error: The intl string context variable 'name' was not provided to the string '{name}<br/>Seats: {seats}<br/>Material: {material}<br/>Color: {color}<br/>Location: {lat} / {lng}'

en.json

{
  "marker.title": "{name}<br/>Seats: {seats}<br/>Material: …

我需要显示没有小数的货币。我们需要货币装饰器 ($)，以及由语言环境指定的逗号和空格，但没有小数。

我已经尝试将 maximumFractionDigits 设置为 0。这有效，但删除了逗号和货币装饰器。

另外，我无法在https://github.com/yahoo/react-intl/wiki/API#number-formatting-apis的文档中复制示例：

formatNumber(1000, {style: 'currency', currency: 'USD'}); // $1,000

我得到 1,000.00 美元。

谢谢你的帮助。

我正在尝试使用此处给出的有关格式化数字的示例。

console.log((16).toLocaleString('en-GB', {
    style: "unit",
    unit: "liter",
    unitDisplay: "long"
}));

我在 chrome 中尝试过，效果很好。但是，在 Safari 和 Firefox 中，我分别收到以下错误Error: style must be either "decimal", "percent", or "currency"和Error: invalid value "unit" for option style.

从文档中我认为在查看浏览器兼容性后它应该适用于所有浏览器。我尝试寻找答案，但找不到有关此问题的任何信息。有谁知道这是为什么或者我可以在哪里找到更多信息？

因此，我正在 Electron 中实现一个项目，并希望在其中实现国际化。我有一个简单的组件，它使用react-intl的 FormattedMessage 和一个messages.js包含其消息描述的文件。我尝试按照文档中的教程使用 提取国际化消息@formatjs/cli，但是，即使它似乎运行正确，npm 脚本似乎也没有返回任何内容，就像它没有找到任何消息一样。我的配置和文件如下所示：

.babelrc

{
  "presets":  ["react-app"],
  "plugins": [
    [
      "react-intl",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "extractFromFormatMessageCall": true,
        "ast": true
      }
    ]
  ]
}

messages.js

import { defineMessage, defineMessages } from 'react-intl';

const scope = 'src.components.Test';

export default defineMessages({
  info: {
    id: `${scope}.info`,
    defaultMessage: 'Info'
  }
});

package.json

...
"scripts": {
    "serve": "react-scripts start",
    "start": "SET DEBUG=true && electron .",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "build": "react-scripts build",
    "test": "react-scripts …

FormatJS 消息中是否可以有 if/else？

例子

我有一个布尔变量isDay，它应该确定显示什么消息。当true我想显示“Day”一词时以及当false我想显示Night.

// message string
message = "Day";

// React component
<FormattedMessage
 id="message"
 values={{isDay: true}}
/>

我希望能够做类似的事情：

message = "{if isDay}Day{else}Night{endif}";

我知道上面不是实际的语法，但想知道FormatJS是否可以实现类似的功能？

import { useEffect } from "react";
import type { AppProps } from "next/app";
import Script from "next/script";
import { SWRConfig } from "swr";
import { useRouter } from "next/router"
import { AppContext } from "@context/index";
import { NextIntlProvider } from 'next-intl'

function MyApp({ Component, pageProps }: AppProps) {

<SWRConfig
      value={{
        onErrorRetry: (error: any) => {
          // Never retry on 401.
          if (error.status === 401) return;
        },
        errorRetryCount: 2,
      }}
    >
    <>
      <NextIntlProvider messages={pageProps.messages}>
        <AppContext>
          <div>
          
            <Component {...pageProps} />
        
          </div>
        </AppContext> …