집 >백엔드 개발 >PHP 튜토리얼 >다중 언어의 React-intl 구현을 설명하는 예

다중 언어의 React-intl 구현을 설명하는 예

小云云원래의: 2017-12-12 09:21:032131검색

이 글에서는 주로 React-intl의 다국어 구현을 위한 샘플 코드를 소개하고 있는데, 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

최근 프로젝트에 언어 국제화 기능이 추가되었습니다.

언어 국제화, 어떤 사람들은 이를 언어 현지화라고 부르는데, 실제로 우리 프로젝트에는 중국어 버전과 영어 버전이 포함되어 있습니다. 논리적으로 말하면 "단어 대 단어 교체"는 아닙니다. 그런데 그렇게 낮은 접근 방식으로 돈을 벌 수 있을까요?

처음에는 언어와 지역에 따라 구성 파일을 전체 프로젝트에 추가하는 전통적인 방법을 고려했는데, 다른 구성 파일을 로드하면 인터페이스 언어 전환 목적을 달성할 수 있습니다. 물론, 이 아이디어가 "초기" 아이디어라고 불리는 것은 바로 이 아이디어가 너무 순진하기 때문입니다. 언어의 국제화는 인터페이스의 UI 텍스트를 다른 언어로 번역하는 것뿐만 아니라 날짜 및 시간 표시, 숫자 표시(영어 환경에서는 3자리마다 쉼표: 1,000), 수량자 표시(사과) 등도 포함합니다. . 은 사과, 두 개의 사과는 사과여야 함), 문자열 중간에 변수가 삽입되는 경우도 있습니다("오늘 점심으로 닭다리를 {count}개 먹었습니다")...

그래서 이렇습니다. 단순한 문자 교체 문제가 아니라 쉽게 디렉토리를 내보내어 단어나 페이지에 넣고 다른 동료가 번역 작업을 비교할 수 있도록 해야 하는 것이 매우 중요합니다! ! 제품 관리자가 코드를 직접 변경하기를 원하시나요? 아니면 하나씩 찾아서 바꾸시겠습니까? 깊이 생각하지 않고 그냥 하시면 저를 믿으세요. 이에 대한 대가를 치르게 될 것입니다.

코더 지망생이라면 index.html에 2934a685527f5cd6bcb20a3dc28499e1 참조 줄을 추가하고 싶지 않으실 겁니다. 또한 UI의 모든 텍스트는 해당 사진을 사용한 학생의 것입니다. 일어나서 나가주세요. React 프로젝트 어딘가에서 뭔가를 우아하게 가져오려면 인터페이스의 텍스트를 d77c50ec181cb3111465cc67be9af9b3 구성 요소로 바꾸고 마지막으로 간단한 구성을 통해 언어 국제화를 달성한 다음 React -intl을 사용합니다.

React 국제화를 위해서는 React-intl을 사용하는 것이 좋습니다. 이 라이브러리는 날짜, 숫자, 문자열 등의 형식을 지정하는 React 구성 요소와 API를 제공합니다. 이제 이 라이브러리를 알았으니 사용해 보겠습니다

Component 사용법

React와 더 통합하기 위해 Components

1을 사용할 수 있습니다. Install

npm install react-intl --save

import {IntlProvider, addLocaleData} from &#39;react-intl&#39;;

3 로캘 구성 파일 추가

zh-CN.js

const zh_CN = { &#39;intl.hello&#39;: "你好", &#39;intl.name&#39;: &#39;我的名字是 {name}&#39; } export default zh_CN;

en-US.js

const en_US = { &#39;intl.hello&#39;: "hello", &#39;intl.name&#39;: &#39;my name is {name}&#39; } export default en_US;

이 구성요소 i18n의 컨텍스트를 설정하는 데 사용되며 전체 애플리케이션이 i18n의 컨텍스트에서 구성되도록 애플리케이션의 루트 구성 요소를 래핑합니다. 가장 중요한 두 가지 구성 항목은 다음과 같습니다. 현재 로케일 메시지 현재의 내용을 불러옵니다. 언어.

언어를 동적으로 전환하고 싶기 때문에 이 두 가지 구성을 동적으로 변경해야 합니다.

import zhCN from &#39;./locale/zh.js&#39;;  //导入 i18n 配置文件
import enUS from &#39;./locale/en.js&#39;;

addLocaleData([...en, ...zh]);

export default class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { store , history } = this.props;
    return (
      <IntlProvider locale=&#39;zh&#39; messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5. 12e09664183759a27c35bf8019a3976f를 사용하세요.

기본 사용법

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={&#39;hello&#39;}
/>

영어 환경이면 Hello가 표시됩니다. .

동적 값 전송

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

intl.name을 정의할 때 템플릿에 {name}을 사용했습니다. 이는 JSON 개체를 통해 동적으로 값을 전달할 수 있음을 의미합니다. FormattedMessage의 값 속성은 콘텐츠를 동적으로 표시합니다.

6. 기타 구성 요소의 사용

Ract-intl은 문자열, 시간 및 날짜를 처리하는 데 도움이 되는 풍부한 구성 요소를 제공합니다. 이해하지 못하는 부분이 있으면 직접 API를 확인해 보세요. 메시지.

API 사용

때때로 코드에서 동적으로 국제화를 수행해야 할 수도 있으며, 이를 위해서는 동적 API가 필요합니다.

1. Import injectIntl

import { injectIntl, FormattedMessage } from &#39;react-intl&#39;;

2. 프로젝트에서 Redux를 사용합니다. Redux를 사용하지 않는다면 기본 injectIntl(App)

을 내보내면 됩니다. 3. intl 객체를 사용하세요

주입의 두 번째 단계를 통과했으며 이제 컴포넌트의 props에 intl 객체를 얻게 됩니다. 제공하는 메소드는 우리와 동일합니다. 위에서 소개한 컴포넌트는 기본적으로 서로 대응합니다. 이때 문자열을 표시하려면 formatMessage 메소드를 사용하면 됩니다.

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

첫 번째 매개변수입니다. formatMessage는 ID로 전달될 수 있으며 두 번째 매개변수는 값으로 전달될 수 있습니다. 자세한 내용은 API

다중 언어의 React-intl 구현을 설명하는 예

관련 기사