react-intl：TypeError：如果使用嵌套的json消息，则必须以String或AST的形式提供消息

Question

将react-intl与嵌套的json消息一起使用时，我在控制台中看到错误：

[React Intl] Error formatting message: "App.filter.dateRange" for locale: "en"
TypeError: A message must be provided as a String or AST.

但是UI正常工作。 ¯\ _（ツ）_ /¯

消息（en.json）

{
  "App.folderChooser.text": "Select folder to parse",
  "App.filter.dateRange": {
    "today": "Today",
    "thisWeek": "This Week",
    "thisMonth": "This Month"
  }
}

组件（DateRangeSelector.js）

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import { FormattedMessage } from 'react-intl';

export default ({ isDisabled, onChangeDateRange }) => (
  <FormattedMessage id="App.filter.dateRange">
    {({ today, thisWeek, thisMonth }) => (
      <DatePicker.RangePicker
        disabled={isDisabled}
        onChange={onChangeDateRange}
        ranges={{
          [today]: [moment().startOf('day'), moment().endOf('day')],
          [thisWeek]: [moment().startOf('week'), moment().endOf('week')],
          [thisMonth]: [moment().startOf('month'), moment().endOf('month')]
        }}
      />
    )}
  </FormattedMessage>
);

根组件（App.js）

import React from 'react';
import { LocaleProvider } from 'antd';
import { IntlProvider } from 'react-intl';

import Header from './Header';
import Content from './Content';
import Footer from './Footer';

import './App.css';

const App = ({ antdLocale, appLocale }) => (
  <LocaleProvider locale={antdLocale} key={antdLocale.locale}>
    <IntlProvider
      locale={appLocale.locale}
      messages={appLocale.messages}
      textComponent={React.Fragment}
      defaultLocale="en"
    >
      <div className="app">
        <div className="app__header">
          <Header />
        </div>
        <div className="app__content">
          <Content />
        </div>
        <div className="app__footer">
          <Footer />
        </div>
      </div>
    </IntlProvider>
  </LocaleProvider>
);

export default App;

如果需要，请提供项目来源：https://github.com/trofivan/myq-jobs-archive-parser

Answer 1

此处的完整讨论：https://github.com/yahoo/react-intl/issues/1161

邮件应放在固定列表中

{
  "App.filter.dateRange.today": "Today",
  "App.filter.dateRange.thisWeek": "This Week",
  "App.filter.dateRange.thisMonth": "This Month",
}

将HOC（高阶组件）用于DateRangeSelector-component：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import { injectIntl } from 'react-intl';

const DateRangeSelector = ({ isDisabled, onChangeDateRange, intl }) => (
  <DatePicker.RangePicker
    disabled={isDisabled}
    onChange={onChangeDateRange}
    ranges={{
      [intl.formatMessage({ id: 'App.filter.dateRange.today' })]: [
        moment().startOf('day'),
        moment().endOf('day')
      ],
      [intl.formatMessage({ id: 'App.filter.dateRange.thisWeek' })]: [
        moment().startOf('week'),
        moment().endOf('week')
      ],
      [intl.formatMessage({ id: 'App.filter.dateRange.thisMonth' })]: [
        moment().startOf('month'),
        moment().endOf('month')
      ]
    }}
  />
);

export default injectIntl(DateRangeSelector);