umijs多语言方式

短命女 2022-11-13 11:20 316阅读 0赞

1.使用<FormattedMessage id='……'/>，umijs不推荐使用，不详细介绍  
2.函数的场合，使用useIntl

import { FormattedMessage, useIntl } from 'umi';
    function value() {
      const intl = useIntl();
      return (
        <div title={intl.formatMessage({ id: title })} />
    }

在使用到的地方主要用如下两行代码：

const intl = useIntl();  
\{intl.formatMessage(\{id:'……'\})\}  
3.Class（React.Component的场合），使用injectIntl

import { FormattedMessage, injectIntl } from 'umi';
    import React, { Component } from "react";
    class Value extends Component {
      constructor(props) {
        super(props);
      }
      render(){
      return(
      const intl = this.props.intl;
         <div className={styles.add}>
              <Button className={styles.button} type="primary" onClick= 
                {this.handleAdd}>
                + {intl.formatMessage({ id: 'btn.add.attribute.value' })}
              </Button>
         </div>
      )
      }
    }
    export default injectIntl(Value);

import \{ injectIntl \} from 'umi';  
const intl = this.props.intl;  
\{intl.formatMessage(\{id:'……'\})\}  
export default injectIntl(类名);

4.链接跳转到新的页面

import { FormattedMessage, useIntl, Link, history, useParams, } from 'umi';
    
    方案一：通过history.push，查询的参数可以通过query传递
    
    <Button onClick: () => {
        history.push({ 
           pathname: `/attribute-manager/category-list/detail/${categoryId}/mesh-attribute-detail/${meshAttributeId}/shader-detail/${record.id}`,
           query: {
               engineCode:engineCode,
               mode: mode,
           },
       });
    }
    />
    
    方案二：通过Link，查询的参数可以通过query传递
    
    <Link
        to={
       { 
           pathname: `/attribute-manager/category-list/detail/${categoryId}/mesh-attribute-detail/${meshAttributeId}/shader-detail/${record.id}`,
                query: {
                  engineCode:engineCode,
                  mode: mode,
                }, 
              }}
              onClick={e => e.stopPropagation()}
            >
              <Button>
                {intl.formatMessage({ id: 'btn.detail' })}
              </Button>
            </Link>

获取参数

import { FormattedMessage, useIntl, Link, history, useParams, } from 'umi';
    
    获取pathname内的参数
    const { shaderId } = useParams();
    获取query的参数
    function ShaderDetail(props) {
    const {
       location: {
         query: { engineCode, mode },
       },
    } = props;
      console.log('======engineCode, mode',engineCode, mode)
    }