使用 react-intl 组件/字符串国际化

Posted 2023-04-05

参考技术A 主要使用 FormattedMessage, injectIntl 两个API

这种不需要额外封装组件，直接使用 injectIntl 包裹当前组件就可以了。

1、组件国际化使用组件 IntlMessages
2、字符串国际化：
1. 使用 injectIntl 包裹当前组件，如 injectIntl(Input)
2. 通过 props 获取 injectIntl传递的 intl 属性
3. 使用 intl.formatMessage( id: intlId ) 实现国际化
PS：如果使用了memo等性能优化逻辑，要注意国际化切换的时候也能实时触发 intl.formatMessage( id: intlId )
如：

用酶测试 react-intl 组件

【中文标题】用酶测试 react-intl 组件

【英文标题】：Testing react-intl components with enzyme

【发布时间】：2016-08-20 08:47:39

【问题描述】：

我查看了 react-intl 的建议，但它没有为 enzyme 留下任何明确的文档。

这就是我一直在尝试编写测试的方式。

import IntlProvider from 'react-intl';

const intlProvider = new IntlProvider(locale: 'en', );
const intl = intlProvider.getChildContext();
const customMessage = shallow(<CustomMessage />,  options:  context: intl  );

但我不断收到错误

不变违规：[React Intl] 找不到所需的 intl 对象。需要存在于组件祖先中。

我查看了他们的仓库，他们似乎有 made it work 和 'react-addons-test-utils'。

我做错了吗？

【参考方案1】：

我通过使用得到它的工作

const customMessage = shallow(<CustomMessage />,  context: intl );

改为。

【讨论】：

这是shallow 实例化的好方法。注意这在使用 Enzyme 的 mount 方法时不起作用。

【参考方案2】：

我已经发布了一个类似问题的答案：

Injecting react-intl object into mounted Enzyme components for testing

您可以import shallowWithIntl from 'intl-helper'，然后使用shallowWithIntl()，而不是Enzyme 的shallow()。

【讨论】：

有没有人在 TypeScript 中有像 shallowWithIntl 或 mountWithIntl 这样的助手？

【参考方案3】：

这就是我实现目标的方式：

import React from 'react';
import StandardFilterIntl, StandardFilter from 'bundles/components/Filter/StandardFilter';
import mountWithIntl from 'enzyme-react-intl';

const FilterComponent = mountWithIntl(<StandardFilterIntl ...standardFilterProps />);
FilterComponent.find(StandardFilter).state()