云策 WordPress 开发者社区

块编辑器开发文档

@wordpress/react-i18n

查看官方原文 ↗
💡 云策文档标注

概述

@wordpress/react-i18n 是 @wordpress/i18n 的 React 绑定包，提供 React 组件和钩子来实现国际化功能。它支持在 React 应用中集成翻译函数，如 __、_x、_n 等。

关键要点

  • 安装方式：通过 npm install @wordpress/react-i18n 安装，需 ES2015+ 环境，否则需包含 @wordpress/babel-preset-default 的 polyfill。
  • 核心 API：包括 I18nProvider 组件、useI18n 钩子和 withI18n 高阶组件，用于在 React 组件中访问 i18n 函数。
  • I18nProvider：作为顶层组件包裹应用，可传入自定义 i18n 实例或使用默认实例。
  • useI18n：React 钩子，提供 __、_x、_n、_nx、isRTL 和 hasTranslation 等函数。
  • withI18n：高阶组件，将 i18n 函数作为 props 传递给包装的组件。
  • 贡献信息：此包是 Gutenberg 项目的一部分，采用 monorepo 结构，贡献需参考项目主指南。

代码示例

import { createI18n } from '@wordpress/i18n';
import { I18nProvider } from '@wordpress/react-i18n';
const i18n = createI18n();

ReactDom.render(
    <I18nProvider i18n={ i18n }>
        <App />
    </I18nProvider>,
    el
);
import { useI18n } from '@wordpress/react-i18n';

function MyComponent() {
    const { __ } = useI18n();
    return __( 'Hello, world!' );
}
import { withI18n } from '@wordpress/react-i18n';

function MyComponent( { __ } ) {
    return __( 'Hello, world!' );
}

export default withI18n( MyComponent );
📄 原文内容

React bindings for @wordpress/i18n.

Installation

Install the module:

npm install @wordpress/react-i18n

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

API

I18nProvider

The I18nProvider should be mounted above any localized components:

Usage

import { createI18n } from '@wordpress/i18n';
import { I18nProvider } from '@wordpress/react-i18n';
const i18n = createI18n();

ReactDom.render(
    <I18nProvider i18n={ i18n }>
        <App />
    </I18nProvider>,
    el
);

You can also instantiate the provider without the i18n prop. In that case it will use the
default I18n instance exported from @wordpress/i18n.

Parameters

  • props I18nProviderProps: i18n provider props.

Returns

  • Children wrapped in the I18nProvider.

useI18n

React hook providing access to i18n functions. It exposes the __, _x, _n, _nx, isRTL and hasTranslation functions from @wordpress/i18n. Refer to their documentation there.

Usage

import { useI18n } from '@wordpress/react-i18n';

function MyComponent() {
    const { __ } = useI18n();
    return __( 'Hello, world!' );
}

withI18n

React higher-order component that passes the i18n translate functions (the same set as exposed by the useI18n hook) to the wrapped component as props.

Usage

import { withI18n } from '@wordpress/react-i18n';

function MyComponent( { __ } ) {
    return __( 'Hello, world!' );
}

export default withI18n( MyComponent );

Parameters

  • InnerComponent ComponentType< P >: React component to be wrapped and receive the i18n functions like __

Returns

  • FunctionComponent< PropsAndI18n< P > >: The wrapped component

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.