@ connectedcars/ react-i18n (英语)

安装

npm install @connectedcars/react-i18n

使用量

见 example 位于 example 文件夹。 特别是背景是如何设置的.

后从上下文取出翻译.

const {t} = this.context

何处 t 返回已翻译的字符串.

翻译一个简单的文本:

t('This text should be translated')

翻译包含变量的文本 :

t('This {word} is in a translated sentence.', { word: 'Variable'})

翻译复数( E)n 被注入到数据对象中,但可以覆盖:

tn(count, '{n} time', '{n} times')

多个行也被支持使用模板字符串(然而, 别 使用情况 ${} 变量 :

t(`Foo
   bar
   baz`)

但请注意,这些翻译不会在HTML中多行提供!

用反应翻译 :

// Use `tnx` for plurals with JSX!
tx(`
  <p>Hello, <strong>{name}</strong></p>
  <p>Today is {day}</p>
`, {
  p: content => <p>{content}</p>,
  strong: content => <strong>{content}</strong>,
  name: 'John Doe',
  day: 'Monday'
})

请注意, 默认翻译为严格模式, 也就是说, 未定义的类型将出现错误 请注意,可以通过设置添加白名单/默认 jsxWhitelist 编辑 I18nPovider。 。 。 .

您也可以在翻译中添加上下文 :

t('Hello', null, 'context here')

进出口

您首先需要设置您的导入和导出脚本 package.json

...

"scripts": {
  "import": "i18n-import",
  "export": "i18n-export",
}

...

然后可以运行以下命令:

• npm run export 创建 POT 文件,其中包含已提取的翻译 ./locales/template.pot
• npm run import 创建包含您全部翻译的 json 文件 ./src/translations.json

运行 npm run import --stripCountry 将删除国家代码 在相应的文件中, ie。 键 da_DK 将变成 da。 。 。 .

中情局

要获得 CI 的输出,请添加以下脚本:

  "ci-translation": "i18n-translation-status"

线性

见我们的 Eslint 插件 : https://github.com/接通车站/eslint-plugin-react-i18n

示例

import React from 'react'
import ReactDOM from 'react-dom'
import {
  I18nStore,
  I18nProvider,
  I18nContext,
  I18nConsumer,
  useTranslate,
  withTranslate,
} from '@connectedcars/react-i18n'
import './index.css'

const translations = {
  "da": {
    "": {
      "content-type": "text/plain; charset=UTF-8",
      "project-id-version": "",
      "pot-creation-date": "",
      "po-revision-date": "",
      "language-team": "",
      "mime-version": "1.0",
      "content-transfer-encoding": "8bit",
      "x-generator": "Poedit 2.0.6",
      "last-translator": "",
      "plural-forms": "nplurals=2; plural=(n != 1);",
      "language": "da"
    },
    "Hello {name}": [
      null,
      "Hej {name}"
    ],
    "Set language to <lang />": [
      null,
      "Skift sprog til <lang />"
    ]
  }
}

const store = new I18nStore({
  translations,
  locale: 'da',
  defaultLocale: 'en',
})

class ExampleA extends React.Component {
  static contextType = I18nContext

  render() {
    return <div>{this.context.t('Hello {name}', { name: 'World' })}</div>
  }
}

class ExampleB extends React.Component {
  render() {
    return (
      <I18nConsumer>
        {i18n => {
          return <div>{i18n.t('Hello {name}', { name: 'World' })}</div>
        }}
      </I18nConsumer>
    )
  }
}

const ExampleC = withTranslate(props => {
  return <div>{props.t('Hello {name}', { name: 'World' })}</div>
})

const ExampleD: React.FC = props => {
  const { tx } = useTranslate()

  return (
    <div>
      {tx('<strong>Hello</strong> there <link>test</link>', {
        strong: content => <strong>{content}</strong>,
        link: content => <a href="https://example.com">{content}</a>
      })}
    </div>
  )
}

const ToggleLocale: React.FC = () => {
  const { tx, setLocale, locale } = useTranslate()
  const swapLocale = locale === 'da' ? 'en' : 'da'

  return (
    <button onClick={() => setLocale(swapLocale)}>
      {tx('Set language to <lang />', {
        lang: (content, attr) => <strong>{swapLocale}</strong>,
      })}
    </button>
  )
}

ReactDOM.render(
  <I18nProvider store={store}>
    <ExampleA />
    <ExampleB />
    <ExampleC />
    <ExampleD />
    <ToggleLocale />
  </I18nProvider>,
  document.getElementById('root')
)