Skip to content

Update translations #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiaoyu2er merged 2 commits into from
Apr 28, 2025
Merged

Update translations #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
edb4c46
docs: update documentation translations
xiaoyu2er Apr 25, 2025
1249399
docs: format docs
xiaoyu2er Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions docs/zh-hans/comparison.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:03.149Z'
id: comparison
title: 对比
---

> ⚠️ 本对比表格正在完善中，部分信息可能不够准确。如果您使用过其中任一库并认为信息可以改进，欢迎通过页面底部的 "Edit this page on Github" 链接提交修改建议（需附说明或证据）。

功能/能力说明：
Expand All @@ -13,23 +14,23 @@ title: 对比
- 🔶 支持且有文档，但需要用户自行编写额外代码
- 🛑 官方不支持或无文档

| 功能 | TanStack Form | Formik | Redux Form | React Hook Form | Final Form |
| -------------------------------------------------- | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
| GitHub 仓库/星标数 | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] |
| 支持框架 | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS |
| 打包体积 | [![][bp-tanstack-form]][bpl-tanstack-form] | [![][bp-formik]][bpl-formik] | [![][bp-redux-form]][bpl-redux-form] | [![][bp-react-hook-form]][bpl-react-hook-form] | [![][bp-final-form]][bpl-final-form] |
| 一流的 TypeScript 支持 | ✅ | ❓ | ❓ | ✅ | ✅ |
| 完整的 TypeScript 类型推断（包含深层字段） | ✅ | ❓ | ❓ | ✅ | 🛑 |
| 无头 UI 组件 (Headless UI) | ✅ | ❓ | ❓ | ✅ | ❓ |
| 框架无关性 | ✅ | ❓ | ❓ | 🛑 | ✅ |
| 细粒度响应式 | ✅ | ❓ | ❓ | ❓ | ✅ |
| 嵌套对象/数组字段 | ✅ | ✅ | ❓ | ✅\*(1) | ✅ |
| 异步验证 | ✅ | ✅ | ❓ | ✅ | ✅ |
| 内置异步验证防抖 | ✅ | ❓ | ❓ | ❓ | ❓ |
| 基于模式的验证 (Schema-based Validation) | ✅ | ✅ | ❓ | ✅ | ❓ |
| 官方开发者工具 | 🛑\*(2) | 🛑 | ✅\*(3) | ✅ | ❓ |
| 服务端渲染集成 (SSR integrations) | ✅ | 🛑 | 🛑 | 🛑 | 🛑 |
| React 编译器支持 (React Compiler support) | ✅ | ❓ | ❓ | 🛑 | ❓ |
| 功能 | TanStack Form | Formik | Redux Form | React Hook Form | Final Form |
| ------------------------------------------ | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
| GitHub 仓库/星标数 | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] |
| 支持框架 | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS |
| 打包体积 | [![][bp-tanstack-form]][bpl-tanstack-form] | [![][bp-formik]][bpl-formik] | [![][bp-redux-form]][bpl-redux-form] | [![][bp-react-hook-form]][bpl-react-hook-form] | [![][bp-final-form]][bpl-final-form] |
| 一流的 TypeScript 支持 | ✅ | ❓ | ❓ | ✅ | ✅ |
| 完整的 TypeScript 类型推断（包含深层字段） | ✅ | ❓ | ❓ | ✅ | 🛑 |
| 无头 UI 组件 (Headless UI) | ✅ | ❓ | ❓ | ✅ | ❓ |
| 框架无关性 | ✅ | ❓ | ❓ | 🛑 | ✅ |
| 细粒度响应式 | ✅ | ❓ | ❓ | ❓ | ✅ |
| 嵌套对象/数组字段 | ✅ | ✅ | ❓ | ✅\*(1) | ✅ |
| 异步验证 | ✅ | ✅ | ❓ | ✅ | ✅ |
| 内置异步验证防抖 | ✅ | ❓ | ❓ | ❓ | ❓ |
| 基于模式的验证 (Schema-based Validation) | ✅ | ✅ | ❓ | ✅ | ❓ |
| 官方开发者工具 | 🛑\*(2) | 🛑 | ✅\*(3) | ✅ | ❓ |
| 服务端渲染集成 (SSR integrations) | ✅ | 🛑 | 🛑 | 🛑 | 🛑 |
| React 编译器支持 (React Compiler support) | ✅ | ❓ | ❓ | 🛑 | ❓ |

\*(1) 对于嵌套数组，使用 TypeScript 时 react-hook-form 要求[通过字段名进行类型转换](https://react-hook-form.com/docs/usefieldarray)

Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/angular/guides/arrays.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:10:43.653Z'
id: arrays
title: 数组
---

TanStack Form 支持将数组作为表单值使用，包括数组中的子对象值。

## 基本用法
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/angular/guides/basic-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:17.959Z'
id: basic-concepts
title: 基本概念
---

本页面介绍了 `@tanstack/angular-form` 库中使用的基本概念和术语。熟悉这些概念将帮助您更好地理解和使用该库。

## 表单实例 (Form Instance)
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/angular/guides/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:12:19.741Z'
id: form-validation
title: 表单验证
---

表单与字段验证 (Form and Field Validation)

TanStack Form 的核心功能之一是验证机制。TanStack Form 提供了高度可定制的验证方式：
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/angular/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:25.901Z'
id: quick-start
title: 快速开始
---

## 快速入门

使用 TanStack Form 的最基本步骤是创建一个表单并添加字段。请注意，以下示例尚未包含任何验证或错误处理功能。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/lit/guides/arrays.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:36.599Z'
id: arrays
title: 数组
---

TanStack Form 支持将数组作为表单值使用，包括数组内的子对象值。

## 基本用法
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/lit/guides/basic-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:24.303Z'
id: basic-concepts
title: 基本概念
---

本页介绍 `@tanstack/lit-form` 库中使用的基本概念和术语。熟悉这些概念将帮助您更好地理解并运用该库及其与 Lit 的配合使用。

## 表单选项 (Form Options)
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/lit/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:31.027Z'
id: quick-start
title: 快速开始
---

## 快速入门

开始使用 TanStack Form 的最低要求是创建一个 `TanstackFormController`，如下所示，我们使用 `Employee` 接口作为测试表单的数据结构：
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/community/balastrong-tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:14:38.417Z'
id: balastrong-tutorial
title: Balastrong的教程
---

TanStack Form 维护者 [Balastrong](https://bsky.app/profile/leonardomontini.dev) 制作了一系列视频教程，展示了该库最核心的功能。通过这些循序渐进的指南，您将深入了解如何使用 TanStack Form 构建功能，并获取实用技巧。

[观看完整播放列表](https://www.youtube.com/playlist?list=PLOQjd5dsGSxInTKUWTxyqSKwZCjDIUs0Y)
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/arrays.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:53.544Z'
id: arrays
title: 数组
---

TanStack Form 支持将数组作为表单值，包括数组内的子对象值。

## 基础用法
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/async-initial-values.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:42.790Z'
id: async-initial-values
title: 异步初始值
---

## 异步初始值

假设您需要从 API 获取数据并将其作为表单的初始值。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/basic-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:47.860Z'
id: basic-concepts
title: 基本概念
---

本页面介绍 `@tanstack/react-form` 库中使用的基本概念和术语。熟悉这些概念将帮助您更好地理解和使用该库。

## 表单选项 (Form Options)
Expand Down
8 changes: 3 additions & 5 deletions docs/zh-hans/framework/react/guides/custom-errors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:56.557Z'
id: custom-errors
title: 自定义错误
---

TanStack Form 为验证器返回的错误值类型提供了完全的灵活性。字符串错误是最常见且易于处理的类型，但该库允许您从验证器中返回任何类型的值。

作为通用规则，任何真值（truthy value）都会被视作错误，并将表单或字段标记为无效；而假值（falsy values，如 `false`、`undefined`、`null` 等）则表示没有错误，表单或字段有效。
Expand Down Expand Up @@ -32,8 +33,7 @@ const form = useForm({
onChange: ({ value }) => {
return {
fields: {
username:
value.username.length < 3 ? '用户名过短' : undefined,
username: value.username.length < 3 ? '用户名过短' : undefined,
email: !value.email.includes('@') ? '无效的邮箱地址' : undefined,
},
}
Expand Down Expand Up @@ -73,9 +73,7 @@ const form = useForm({
{
/* TypeScript 会根据验证器推断错误类型为数字 */
}
;<div className="error">
您还需要 {field.state.meta.errors[0]} 年才符合资格
</div>
;<div className="error">您还需要 {field.state.meta.errors[0]} 年才符合资格</div>
```

### 布尔类型
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/debugging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:26.089Z'
id: debugging
title: 调试
---

以下是您可能在控制台中遇到的常见错误列表及其解决方法。

## 将非受控输入更改为受控输入
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/form-composition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:10:42.863Z'
id: form-composition
title: 表单组合
---

# 表单组合 (Form Composition)

对 TanStack Form 的一个常见批评是其开箱即用的冗长性。虽然这对于教育目的可能有用——有助于强化对 API 的理解——但在生产用例中并不理想。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/linked-fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:50.083Z'
id: linked-fields
title: 关联字段
---

## 联动两个表单字段

在某些场景下，您可能需要将两个字段进行联动：当其中一个字段的值发生变化时，另一个字段需要重新验证。一个典型用例是同时存在 `password` 和 `confirm_password` 字段的情况，此时需要确保当 `password` 字段值不匹配时，`confirm_password` 字段能立即显示错误——无论哪个字段触发了值的变化。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/listeners.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:58.594Z'
id: listeners
title: 监听器
---

## 事件触发器的副作用处理

当您需要"影响"或"响应"某些触发行为时，可以使用监听器 (listener) API。例如，如果您作为开发者希望在某个字段变化时重置另一个表单字段，就应该使用监听器 API。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/react-native.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:09.238Z'
id: react-native
title: React Native
---

## 动机

大多数 Web 框架并未提供全面的表单处理方案，迫使开发者要么自行实现定制方案，要么依赖功能有限的库。这往往导致一致性缺失、性能低下以及开发时间增加。TanStack Form 旨在通过提供一套强大易用的全功能表单管理方案来解决这些问题。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/reactivity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:53.631Z'
id: reactivity
title: 响应式
---

Tanstack Form 在与表单交互时不会触发重新渲染。因此您可能会发现直接使用表单或字段状态值无法获得预期效果。

如需访问响应式值，您需要通过以下两种方法之一进行订阅：`useStore` 钩子或 `form.Subscribe` 组件。
Expand Down
7 changes: 4 additions & 3 deletions docs/zh-hans/framework/react/guides/ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:11.947Z'
id: ssr
title: SSR/TanStack Start/Next.js
---

TanStack Form 开箱即支持 React，兼容 服务端渲染 (SSR) 并保持框架无关性。但需要根据您选择的元框架进行特定配置。

目前我们支持以下元框架：
Expand Down Expand Up @@ -323,13 +324,13 @@ export const ClientComp = () => {
此处我们结合使用了 [React 的 useActionState 钩子](https://playfulprogramming.com/posts/what-is-use-action-state-and-form-status) 和 TanStack Form 的 useTransform 钩子来合并服务端动作返回的状态与表单状态。

> 如果在 Next.js 应用中遇到以下错误：
>
>
> ```typescript
> x 您正在导入需要 useState 的组件。此 React 钩子仅在客户端组件中有效。解决方法是在文件（或其父级）中添加 "use client" 指令
> ```
>
>
> 这是因为您没有从 `@tanstack/react-form/nextjs` 导入服务端代码。请确保根据运行环境导入正确的模块。
>
>
> [这是 Next.js 的已知限制](https://github.com/phryneas/rehackt)。其他元框架通常不会出现此问题。

## 在 Remix 中使用 TanStack Form
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/submission-handling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:04.203Z'
id: submission-handling
title: 提交处理
---

在需要处理多种表单提交类型的场景下（例如，一个表单同时包含导航至子表单的按钮和执行标准提交的按钮），可以利用 `onSubmitMeta` 属性和 `handleSubmit` 函数的重载机制。

## 基础用法
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/ui-libraries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:09:36.714Z'
id: ui-libraries
title: UI库集成
---

## 在 UI 库中使用 TanStack Form

TanStack Form 是一个无头 (headless) 库，为您提供完全的样式定制灵活性。它能与多种 UI 库兼容，包括 `Tailwind`、`Material UI`、`Mantine` 甚至原生 CSS。
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/react/guides/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:10:47.393Z'
id: form-validation
title: 表单验证
---

表单与字段验证 (Form and Field Validation)

TanStack Form 的核心功能之一是验证机制。它提供了高度可定制的验证方式：
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-hans/framework/react/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:08:52.516Z'
id: quick-start
title: 快速开始
---

TanStack Form 与你以往使用的大多数表单库不同。它专为大规模生产环境设计，注重类型安全、性能与组合能力，旨在提供无与伦比的开发者体验。

为此，我们制定了[库的使用哲学](/form/latest/docs/philosophy)，更重视可扩展性和长期开发者体验，而非简短可分享的代码片段。
Expand Down Expand Up @@ -109,8 +110,7 @@ const PeoplePage = () => {
name="age"
validators={{
// 可选择表单级或字段级验证器
onChange: ({ value }) =>
value > 13 ? undefined : '必须年满 13 岁',
onChange: ({ value }) => (value > 13 ? undefined : '必须年满 13 岁'),
}}
children={(field) => (
<>
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/solid/guides/arrays.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:14.180Z'
id: arrays
title: 数组
---

TanStack Form 支持将数组作为表单值使用，包括数组内的子对象值。

## 基本用法
Expand Down
1 change: 1 addition & 0 deletions docs/zh-hans/framework/solid/guides/async-initial-values.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ translation-updated-at: '2025-04-12T04:11:00.234Z'
id: async-initial-values
title: 异步初始值
---

假设您需要从 API 获取数据并将其作为表单的初始值使用。

虽然这个问题表面看起来简单，但背后存在一些您可能尚未考虑到的隐藏复杂性。
Expand Down
Loading