Javascript 如何访问IntlProvider'；组件中的区域设置和消息？

所以我的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>
);

import { useIntl } from 'react-intl'

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

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

export default MyComponent

importtrfifrom./translations/fi_-fi.json'；
从“/translations/sv_SE.json”导入trSv；
ReactDOM.render(
);

并且

Root

具有多个子组件和所有组件。现在，如何在这些子组件中获取提供的

区域设置

和

消息

？我知道我可以将它们作为道具传递给

Root

，后者再次将它们传递下去，但我的树相当深，维护这一点很痛苦

可以直接访问子组件中传递给

IntlProvider

的

locale

和

messages

吗？

如前所述，您可以使用HOC（高阶组件）包装组件，以便组件需要访问组件树根目录下

提供的国际化数据

此外，您还必须使用

组件来实际使用该数据进行显示

以下是上述文档中的一个示例：

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);

---

编写react with hook时，可以使用

useIntl

hook访问

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

从“React”导入React
从“react intl”导入{useIntl，FormattedDate}
const FunctionComponent:React.FC=（{date}）=>{
常量intl=useIntl（）
返回(
)
}
导出默认函数组件

---

（示例取自，更多信息可在中找到）

是的，这是可能的。按如下方式导入useIntl钩子：

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>
);

import { useIntl } from 'react-intl'

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

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

export default MyComponent

从'react intl'导入{useIntl}
常量MyComponent:=（）=>{
常量intl=useIntl（）
log（'您需要的是here:'，intl.locale）
返回(
...
)
}
导出默认MyComponent

是的，第一个链接是我最初遵循的，但是这个特定的用例要求我翻译

的

占位符属性，因此我不能使用
组件来实现这一点。“如果您需要直接访问，可以通过组件的道具访问消息本身。本例中记录了这一点“我不太明白这里的意思，这个例子只是使用了全局
消息
对象？我特别想问的是，是否可以在子组件中获取传递给
的
消息
对象，或者我唯一的选择是将其作为props转发到整个树中。是的，我回答得太快了，对不起！我相应地更新了我的答案。