react-intl国际化踩坑记录

最近的项目中有国际化的需求，经过调研之后决定使用react-intl进行。特地记录一下开发中需要注意的点及踩过的坑。

1.在class组件中如何使用以及ts类型的声明

通常在函数组件中我们直接通过useIntl这个钩子函数来使用，但是在class组件中是没法使用钩子函数的。这个时候就需要用到react-intl提供的另外一个方法injectIntl。具体使用方法如下

// 定义的props要继承react-intl的WrappedComponentProps
interface ICommonDialogProps extends WrappedComponentProps<"intl"> {}

class CommonDialog extends React.Component<ICommonDialogProps, ICommonDialogState>{
    render(){
        return <div>{this.props.intl.formatMessage({id: "", defaultMessage: ""})}<div>
    }
}

// 通过injectIntl这个高阶组件将intl注入到我们的组件中去
export default injectIntl(CommonDialog);

injectIntl是react-intl暴露出来的一个高阶组件，将intl对象注入到组件中去。

2.模板标签的使用

实际的项目开发中不可能只有简单的文字转换，有时可能会涉及到特殊文本的转换例如：aaa<span>bbb</span>ccc，这个时候需要将bbb单独转换，代码如下：

<FormattedMessage
    id="olap_dragToColumn"
    defaultMessage="can drag <light>dimension</light> or <light>measure</light> to this area"
    values={{
        light: chunks => <span>{chunks}</span>
    }}
/>

太过基础的使用就不再赘述了，太难的使用方法呢我也没有用到过，大家可以自行查看react-intl的官方文档。

希望对各位有所帮助