From 34f5bce715a63c2464466c8e12c1f0f043126765 Mon Sep 17 00:00:00 2001 From: zhongwj Date: Tue, 20 Jan 2026 11:10:34 +0800 Subject: [PATCH 01/14] git commit -m "docs(zh-hans): translate Activity API reference" --- src/content/reference/react/Activity.md | 192 ++++++++++++------------ 1 file changed, 96 insertions(+), 96 deletions(-) diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 127a4b8d0a..0082091f7f 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -4,7 +4,7 @@ title: -`` lets you hide and restore the UI and internal state of its children. +`` 允许你隐藏并恢复其子组件的 UI 以及内部状态。 ```js @@ -18,11 +18,11 @@ title: --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `` {/*activity*/} -You can use Activity to hide part of your application: +你可以使用 Activity 来隐藏应用中的部分内容 ```js [[1, 1, "\\"hidden\\""], [2, 2, ""], [3, 1, "\\"visible\\""]] @@ -30,33 +30,33 @@ You can use Activity to hide part of your application: ``` -When an Activity boundary is hidden, React will visually hide its children using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions. +当 Activity 边界被 隐藏 时，React 会使用 CSS 属性 `display: "none"` 从视觉上隐藏 其子组件。同时，React 还会销毁它们的 Effect，并清理所有活跃的订阅。 -While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. +在隐藏期间，子组件仍会响应新 Props 的变化而进行重新渲染，但其优先级会低于页面上的其他内容。 -When the boundary becomes visible again, React will reveal the children with their previous state restored, and re-create their Effects. +当边界再次变为 可见 时，React 会将子组件重新显示，并恢复它们之前的状态，同时重新创建它们的 Effect。 -In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects. +通过这种方式，`Activity` 可以被视为一种渲染“后台活动”的机制。与其完全丢弃那些可能再次显示的内容，不如使用 `Activity` 来保持并恢复这些内容的 UI 和内部状态，同时确保隐藏的内容不会产生多余的副作用。 -[See more examples below.](#usage) +[请参阅下方的更多示例。](#usage) #### Props {/*props*/} -* `children`: The UI you intend to show and hide. -* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. +* `children`： 你想要显示或隐藏的 UI。 +* `mode`： 字符串值，取值为 `'visible'` 或 `'hidden'`。如果省略，默认值为 `'visible'`。 #### Caveats {/*caveats*/} -- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation. -- A *hidden* Activity that just renders text will not render anything rather than rendering hidden text, because there’s no corresponding DOM element to apply visibility changes to. For example, `` will not produce any output in the DOM for `const ComponentThatJustReturnsText = () => "Hello, World!"`. `` will render visible text. +- 如果 Activity 被渲染在 [ViewTransition](/reference/react/ViewTransition) 内部，并且由于 [startTransition](/reference/react/startTransition) 触发的更新而变为可见，它将触发 ViewTransition 的 `enter` 动画。如果它变为隐藏，则会触发其 `exit` 动画。 +- 仅渲染文本的 `Activity` 不会渲染出任何内容，而不是渲染出“隐藏的文本”，因为没有相应的 DOM 元素可以应用可见性变化。例如，对于 `const ComponentThatJustReturnsText = () => "Hello, World!"`，执行 `` 在 DOM 中不会产生任何输出。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/} +### 恢复隐藏组件的状态 {/*restoring-the-state-of-hidden-components*/} -In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition: +在 React 中，当你想要根据某个条件来显示或隐藏一个组件时，通常会基于该条件对其进行挂载或卸载： ```jsx {isShowingSidebar && ( @@ -64,9 +64,9 @@ In React, when you want to conditionally show or hide a component, you typically )} ``` -But unmounting a component destroys its internal state, which is not always what you want. +但卸载一个组件会销毁其内部状态，而这并不总是你想要的效果。 -When you hide a component using an Activity boundary instead, React will "save" its state for later: +相比之下，当你使用 `Activity` 边界来隐藏组件时，React 会将其状态“保存”起来以便后续使用： ```jsx @@ -74,11 +74,11 @@ When you hide a component using an Activity boundary instead, React will "save" ``` -This makes it possible to hide and then later restore components in the state they were previously in. +这使得隐藏组件并随后将其恢复到之前的状态成为可能。 -The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. +下方的示例包含一个带有可展开部分的侧边栏。你可以点击“Overview”来展开下方的三个子项。应用主区域还有一个可以隐藏或显示侧边栏的按钮。 -Try expanding the Overview section, and then toggling the sidebar closed then open: +试着展开“Overview”部分，然后将侧边栏切换为关闭，再重新打开： @@ -111,7 +111,7 @@ import { useState } from 'react'; export default function Sidebar() { const [isExpanded, setIsExpanded] = useState(false) - + return (