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

使用 react-intl 串国际化有两种情况：组件和字符串。绝大部分情况都可以使用组件的方式传入ID属性就可以解决需求问题，但遇到无法使用JSX的时候，就只能使用字符串的方式国际化了。

1、组件国际化

主要使用FormattedMessage, injectIntl两个API

1. 封装组件

// IntlMessages.js
import React from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';

const InjectMassage = props => <FormattedMessage {...props} />;
export default injectIntl(InjectMassage, {
  withRef: false,
});

2. 使用

import React from 'react';
...
<Tooltip title={<IntlMessages id={item.id} />} placement="right" />

2、字符串国际化

这种需求最常见的应该就是input输入框的placeHolder属性无法使用jsx的时候了

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

// AutocompleteComponent.js
import React, { useState, useMemo, useRef } from 'react';
import { injectIntl } from 'react-intl';

import Autocomplete from '@material-ui/lab/Autocomplete';

const AutocompleteComponent = props => {
  console.log(props);
  const {
    intl, // 通过react-intl的高阶函数injectIntl包裹当前组件获取 - 字符串国际化
    intlId,// 国际化对应的id
...
  } = props;

 return (
      <Autocomplete
          multiple
          freeSolo
          options={[]}
          {...props} 
          onChange={change}
          renderInput={params => (
            <TextField
              className={classes.autoInput}
              {...params}
              {...inputProps}
              error={isError}
              placeholder={intl.formatMessage({ id: intlId })}
              onChange={null}
              onMouseOver={() => setInputStatus('HOVER')}
              onMouseLeave={() => setInputStatus('LEAVE')}
              onFocus={() => setFocus(true)}
              onBlur={() => setFocus(false)}
            />
          )}
        />
  );
}

export default injectIntl(AutocompleteComponent);

总结

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

/**
 *  动态计算 placeholder 的展示
 */
    const memoHolder = useMemo(() => {
    const arr = [...filterParams];
    arr.splice(0, values.length);
          return getPlaceHolder(arr, intl);
          // 这里使用了缓存函数usememo，所以切换国际化的时候需要加入 locale 同步触发更新
    }, [values, filterParams, locale]);