React 设置

使用方法

npx gtx-cli setup

概述

gtx-cli setup 命令会自动为您的项目设置翻译功能，使其能够与 gt-next 或 gt-react 配合使用。 它通过解析项目的文件树并使用 babel 将 <T> 组件包装在静态内容周围来实现这一点。 任何动态内容都会自动用 <Var> 组件包装。

此命令作为 init 设置向导的一部分运行。此外，此命令也可以通过 npx gtx-cli setup 独立运行。

此命令应该在您首次国际化项目时运行一次。 在后续更改时，您应该使用 scan 命令来更新您的项目。

有关更多详细信息，请参阅 scan 命令。

import { T, Var } from 'gt-next';  

export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, world! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

如果您的项目使用 Next.js App Router，setup 命令将在相应的 layout.jsx 文件中添加一个 <GTProvider> 组件。

参数

行为

配置文件

首次运行 CLI 工具时，它会尝试在项目根目录中创建一个 gt.config.json 文件。 此文件包含有关项目的元数据，用于翻译您的内容。

在这里了解更多关于 gt.config.json 文件的信息。

id 属性

设置命令提供了为您的 <T> 组件自动生成唯一 ID 的选项。 这对于使用大量 <T> 组件并希望避免手动为每个组件分配唯一 ID 的项目很有用。

此 id 对于在翻译编辑器和控制台中引用特定翻译很有用。

<T> 注入行为

基本情况

CLI 将在尽可能高的级别包装 JSX 元素。 这意味着如果组件尚未被包装，它将把整个组件包装在 <T> 组件中。

<div>Hello, world!</div> -> <T id="SOME_ID"><div>Hello, world!</div></T>

查看参考文档了解更多关于 <T> 组件如何被包装的详细信息。

<GTProvider> 行为

对于 Next.js App Router，设置命令将自动在适当的 layout.jsx 文件中将 <T> 组件包装在 <GTProvider> 组件中。

此外，它还会在 next.config.js 文件中为您设置 withGTConfig Next.js 插件。

自动格式化

设置命令将根据您项目的配置，使用 Prettier、Biome 或 ESLint 自动格式化它对代码库所做的更改。