React-intl 구현의 다국어 예제에 대한 자세한 설명

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

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

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

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

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

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

Component 사용법

React와 더 통합하기 위해 Components

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

npm install react-intl --save

2.

import {IntlProvider, addLocaleData} from 'react-intl';

3. 로케일 구성 파일 추가

zh-CN.js

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

en-US.js

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

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

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

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

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.

기본 사용법

<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 'react-intl';

2. 컴포넌트에 Inject

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

프로젝트에서 Redux를 사용했는데, 인젝션은 위와 같을 겁니다. Redux에서는 기본 injectIntl(App)

만 내보내면 됩니다. 3. intl 객체 사용

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

const {intl} = this.props;
　　
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

formatMessage의 첫 번째 매개변수는 다음과 같습니다. 자세한 내용은 API를 확인하세요.

관련 권장 사항:

PHP - 다중 언어 자동 전환 구현

자세한 그래픽 및 텍스트 설명 ASP.NET Core 다국어 지원

ASP.NET Core 다국어 지원 상세 소개

위 내용은 React-intl 구현의 다국어 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!