Question

所以我的index.js有这样的东西：

import trFi from './translations/fi_FI.json';
import trSv from './translations/sv_SE.json';

ReactDOM.render(
  <IntlProvider
    locale={my_locale}
    messages={{ fi: trFi, sv: trSv }[my_locale]}
  >
      <Root />
  </IntlProvider>
);

Root有多个子组件和所有子组件。现在，我如何在这些子组件中获取提供的locale和messages？我知道我可以将它们作为道具传递给Root，它再次将它们传递下去，但是我的树相当深，而且为了保持这一点，这是一种痛苦。

是否可以直接访问子组件中传递给locale的{{1}}和messages？

Answer 1

正如in the docs here所述，您可以使用HOC（高阶组件）将组件包装到需要访问组件树根目录<IntlProvider />提供的国际化数据的位置。

此外，您必须使用<Formatted*>组件来实际使用该数据进行显示。

以下是上述文档的示例：

import React from 'react';
import { injectIntl, FormattedRelative } from 'react-intl';

const PostDate = ({ date, intl }) => (
    <span title={ intl.formatDate(date) }>
        <FormattedRelative value={ date }/>
    </span>
);

PostDate.propTypes = {
    date: PropTypes.any.isRequired,
    intl: intlShape.isRequired,
};

export default injectIntl(PostDate);

除了format*助手之外，还可以通过相同的组件prop messages（{{}在树下直接访问配置道具，包括locale和intl。 3}}）：

const { locale, messages } = this.props.intl;

Answer 2

在编写带有钩子的react时，您可以使用useIntl钩子来访问intl对象。

import React from 'react'
import {useIntl, FormattedDate} from 'react-intl'

const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
  const intl = useIntl()
  return (
    <span title={intl.formatDate(date)}>
      <FormattedDate value={date} />
    </span>
  )
}

export default FunctionComponent

（摘自https://formatjs.io/docs/react-intl/api/#useintl-hook的示例，以及更多信息）

Answer 3

是的，这是可能的。像这样导入 useIntl 钩子：

import { useIntl } from 'react-intl'

const MyComponent: = () => {
  const intl = useIntl()
  console.log('What you need is here: ', intl.locale)

  return (
    <>
      ...
    </>
  )
}

export default MyComponent

如何访问组件中的IntlProvider的语言环境和消息？

3 个答案: