无法理解用于语言翻译的react-intl的工作过程

Question

我开发了一个使用reactjs和redux的应用程序。我使用的语言是西班牙语。我想这个应用程序是多语言。语言有两种选择。一个是默认的西班牙语，另一个是英语。有一个下拉菜单供用户选择语言。当用户选择英文时，所有的字符串应该被转换成英文。我查看了react-intl包，但我很难理解消息道具应该如何获得IntlProvider。

现在，我已经为我的英语JSON文件如下：

en.js

export default [ 
    { 
    "id": "Nav__registration_text", 
    "defaultMessage": "Registration", 
    }, 
    { 
    "id": "Nav__login_text", 
    "defaultMessage": "Login", 
    }, 
] 

import { connect } from 'react-redux'; 
import { IntlProvider } from 'react-intl'; 

function mapStateToProps(state) { 
    console.log('locale is', state.locale.locale); 
    return { locale: state.locale.locale }; 
} 
export default connect(mapStateToProps)(IntlProvider); 

import { Provider } from 'react-redux'; 
import { addLocaleData } from 'react-intl'; 
import en from 'react-intl/locale-data/en'; 
import es from 'react-intl/locale-data/es'; 
import App from './components/app'; 
import reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware()(createStore); 

addLocaleData(en); 
addLocaleData(es); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <ConnectedIntlProvider> 
     <App /> 
    </ConnectedIntlProvider> 
    </Provider> 
    , document.querySelector('.app')); 

action.js 

export function selectedLocale(locale) { 
    console.log('locale', locale); 
    return { 
    type: 'LOCALE_SELECTED', 
    locale 
    }; 
} 

reducer 

const initialState = { 
    locale: 'es', 
}; 
export const localeReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case 'LOCALE_SELECTED': 
     return { ...initialState, locale: action.locale }; 
    default: 
     return state; 
    } 
}; 


Nav.js 

import { intlShape, injectIntl, defineMessages } from 'react-intl'; 

const Nav = (props) => (
    <Router> 
    <div> 
     <nav className="navbar navbar-default"> 
     <div className="container-fluid"> 
      <div className="collapse navbar-collapse"> 
      <ul className="nav navbar-nav navbar-right nav-social-icon"> 
       <li className="dropdown"> 
       <a 
       href="" 
       className="dropdown-toggle" 
       data-toggle="dropdown" 
       role="button" 
       aria-haspopup="true" 
       aria-expanded="false" 
       > 
       ES 
       <span className="caret" /> 
       </a> 
       <ul className="dropdown-menu"> 
       <li onClick={() => props.selectedLocale('en-Us')}> 
        en-US 
       </li> 
       <li onClick={() => props.selectedLocale('es')}> 
        es 
       </li> 
       </ul> 
       </li> 
       <li className="btn-group"> 
       <button 
        className="btn btn-default" 
        onClick={props.showModal} 
       > 
        <Link to={{ pathname: '/signup' }}>Regístrate</Link> // wanted to change this to english when user selects english language from dropdown 
       </button> 
       <button 
        onClick={props.showModal} 
        className="btn btn-default" 
       > 
        <Link to={{ pathname: '/login' }}>Iniciar sesión</Link> 
       </button> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    </div> 
    </Router> 
); 

Nav.propTypes = { 
    intl: intlShape.isRequired, 
}; 
export default injectIntl(Nav); 

我不明白它的文档。请在此引导我。

Answer 1

就我个人而言，我会建议i18n反应库，其文档非常简单，易于使用。我会告诉你如何实现它:)

你需要的是： - translation.js您所有的西班牙语和英语翻译 - 导入此文件translation.js一次 - 进口在每一页上国际化图书馆在你的组件中使用它。

export function Translations(language) { 
    if (language == 'UK') 
    { 
     return { 
      menu_title:      'Timeline', 
      menu_inbox:      'Messages' 
     } 
    } 
else if (language == 'ES') 
    { 
     return { 
      menu_title:      'Línea de tiempo', 
      menu_inbox:      'Mensajes' 
     } 
    } 

} 

那么你必须输入这个翻译文件，并设置当前语言：

import * as T from '../core/translations.js' 
import i18n from 'i18n-react'; 

onTranslation() { 
    i18n.setTexts(T.Translations("UK")); 
} 

ofcourse你可以调用语言之间的功能onTranslation任何时候你想切换。

最后，您可以在组件上使用的翻译的话：

例如像这样：

render() 
    { 
     return (
      <div pageTitle={i18n.translate('menu_title')} > 
       <Content> 
        {i18n.translate('menu_inbox')} 
       </Content> 
      </div> 
     ) 
} 

我希望你能做得出来，发现我的答案有帮助不够:)

祝你好运！