Понимание интернационализации Yahoo React

Интернационализируйте приложения React. Эта библиотека предоставляет компоненты React и API для форматирования дат, чисел и строк, включая множественное число и обработку переводов.

Вы можете интегрировать React-Intl в свой компонент, как показано ниже.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';

class App extends Component {
   
    render() {
        
        return (
            <p>
                //welcome
                <FormattedMessage
                    id="app.welcome"
                    defaultMessage="welcome"
                />
            </p>
        );
    }
}

есть файл en.json. Вы можете написать здесь все свои статические текстовые идентификаторы.

{    
"app.welcome" : "welcome"
}

…………………………………………………………………………………….

Другой способ

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage, injectIntl } from 'react-intl';
import messages from '../intl/messages/profileIcon';
import commonMessages from '../intl/messages/common';
class className extends Component {
  static propTypes = {
    intl: PropTypes.object.isRequired
  };
render() {
    const { formatMessage } = this.props.intl;
    
return (
      <div >
           {formatMessage(messages.sometext)}
      </div>
    );
  }
}
export default connect(({ something }) => ({
  something }), { })(injectIntl(className));

есть файл common.js. Здесь вы можете написать все свои статические текстовые идентификаторы.

import { defineMessages } from 'react-intl';
const commonMessages = defineMessages({
  sometext: {
    id: 'app.welcome',
    description: 'Welcome',
    defaultMessage: 'Welcome'
  },
});
export default commonMessages;

есть файл en.json. Вы можете написать здесь все свои статические текстовые идентификаторы.

{    
"app.welcome" : "welcome"
}