Skip to content

docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 4f9e9a56 #1381

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.

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
merged 4 commits into from
Nov 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 1 addition & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ export default function PackingList() {

请注意,你必须写成 `importance > 0 && ...` 而不是 `importance && ...`,这样如果 `importance` 的值为 `0` 时,就不会将 `0` 作为结果进行渲染!

在这个解决方案中,使用了两个独立的条件来在名称和 importance label 之间插入一个空格。或者,你可以使用带有前导空格的片段:`importance > 0 && <> <i>...</i></>`,或者在 `<i>` 标签内立即添加一个空格:`importance > 0 && <i> ...</i>`。
在这个解决方案中,使用了两个独立的条件来在名称和 importance label 之间插入一个空格。或者,你可以使用带有前导空格的 Fragment:`importance > 0 && <> <i>...</i></>`,或者在 `<i>` 标签内立即添加一个空格:`importance > 0 && <i> ...</i>`。

</Solution>

Expand Down Expand Up @@ -643,4 +643,3 @@ button { display: block; margin-top: 10px; }
非常感谢那些自愿参加 alpha 和 beta 测试计划的人。你们的热情和宝贵的反馈帮助我们塑造了这些文档。特别感谢我们的 beta 测试人员 [Debbie O'Brien](https://twitter.com/debs_obrien),她在 React Conf 2021 上分享了她使用 React 文档的经验。

最后,感谢 React 社区的启发,是你们促使我们完成了这个新的项目。我们希望新文档将帮助大家使用 React 构建任何你想要的用户界面。

2 changes: 1 addition & 1 deletion src/content/community/versioning-policy.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ React 的开发版本包含许多有用的警告信息。只要可能,我们

* **开发警告**。由于这些不会影响生产行为,我们可能会在主要版本之间添加新的警告或修改现有警告。事实上,这正是我们能够可靠地警告即将发生的重大变化的原因。
* **以 `unstable_` 开头的 API**。这些被提供作为实验性功能,我们对其 API 还不够自信。通过以` unstable_` 前缀发布这些版本,我们可以更快地迭代并尽快达到稳定的 API。
* **React 的 alpha 和 canary 版本**。我们提供 React 的 alpha 版本作为早期测试新功能的一种方式,但我们需要根据在 alpha 期间学到的知识来灵活进行更改。如果你使用这些版本,请注意在稳定版本发布之前 API 可能会发生变化。
* **React 的 alpha 和 Canary 版本**。我们提供 React 的 alpha 版本作为早期测试新功能的一种方式,但我们需要根据在 alpha 期间学到的知识来灵活进行更改。如果你使用这些版本,请注意在稳定版本发布之前 API 可能会发生变化。
* **未记录的 API 和内部数据结构**。如果你访问内部属性名如 `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` 或 `__reactInternalInstance$uk43rzhitjg`,则无法得到保证,你将自负其责。

此策略旨在务实:当然,我们不希望给你带来麻烦。如果我们为所有这些更改增加主要版本,我们将不断发布更多的主要版本,并最终给社区带来更多版本管理的困扰。这也意味着我们无法以我们希望的速度推进改进 React。
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -628,7 +628,7 @@ export default function PackingList() {

需注意的是,你必须使用 `importance > 0 && ...` 而不是 `importance && ...`,这样如果 `importantce` 是 `0`, `0` 就不会被渲染出来了!

在这个解决方案里,分别用了两个条件判断在名字和重要性标签里插入一个空格。另外,你也可以通过一个带前导空格的 fragment :`importance > 0 && <> <i>...</i></>`,或者将空格放在 `<i>` 标签内:`importance > 0 && <i> ...</i>`, 来实现相同的效果。
在这个解决方案里,分别用了两个条件判断在名字和重要性标签里插入一个空格。另外,你也可以通过一个带前导空格的 Fragment :`importance > 0 && <> <i>...</i></>`,或者将空格放在 `<i>` 标签内:`importance > 0 && <i> ...</i>`, 来实现相同的效果。

</Solution>

Expand Down
6 changes: 3 additions & 3 deletions src/content/learn/rendering-lists.md
Original file line number Diff line number Diff line change
Expand Up @@ -1206,7 +1206,7 @@ hr {

<Hint>

你可以尝试把原本的 `map` 改造成手动循环,或者试下 fragment 语法。
你可以尝试把原本的 `map` 改造成手动循环,或者试下 Fragment 语法。

</Hint>

Expand Down Expand Up @@ -1269,7 +1269,7 @@ hr {

原本使用诗句顺序索引作为 `key` 的方法已经行不通了,因为现在数组里同时包含了分隔符和诗句。但是,你可以用添加后缀的形式给它们赋予独一无二的 key 值,比如 `key={i + '-text'}` 这样。

另一种做法是,生成包含 `<hr />` 和 `<p>...</p>` 的 fragment 集合,但因其简写语法 `<> </>` 不支持指定 key,所以你需要写成 `<Fragment>` 的形式。
另一种做法是,生成包含 `<hr />` 和 `<p>...</p>` 的 Fragment 集合,但因其简写语法 `<> </>` 不支持指定 key,所以需要写成 `<Fragment>` 的形式。

<Sandpack>

Expand Down Expand Up @@ -1315,7 +1315,7 @@ hr {

</Sandpack>

记住,采用 fragment 语法(通常写作 `<> </>`)来包裹 JSX 节点可以避免引入额外的 `<div>` 元素!
记住,使用 Fragment 语法(通常写作 `<> </>`)来包裹 JSX 节点可以避免引入额外的 `<div>` 元素!

</Solution>

Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -362,11 +362,11 @@ export default function Square() {

<ConsoleBlock level="error">

/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`?
/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX Fragment `<>...</>`?

</ConsoleBlock>

React 组件必须返回单个 JSX 元素,不能像两个按钮那样返回多个相邻的 JSX 元素。要解决此问题,可以使用 `<>` `</>` 来包裹多个相邻的 JSX 元素,如下所示:
React 组件必须返回单个 JSX 元素,不能像两个按钮那样返回多个相邻的 JSX 元素。要解决此问题,可以使用 Fragment(`<>` `</>`)包裹多个相邻的 JSX 元素,如下所示:

```js {3-6}
export default function Square() {
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ title: "<input>"

<Canary>

React's extensions to the `formAction` prop are currently only available in React's canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
</Canary>

[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/hooks/useFormState.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ canary: true

<Canary>

`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。此外,需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
`useFormState` Hook 当前仅在 React Canary 与 experimental 渠道中可用。请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。此外,需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。

</Canary>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/hooks/useFormStatus.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ canary: true

<Canary>

`useFormStatus` Hook 目前仅在 React canary 与 experimental 渠道中可用。在此处了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。
`useFormStatus` Hook 目前仅在 React Canary 与 experimental 渠道中可用。在此处了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。

</Canary>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/use.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ canary: true

<Canary>

`use` Hook 仅在 canary 与 experimental 渠道中可用。参阅 [React 发布渠道](/community/versioning-policy#all-release-channels) 以了解更多信息。
`use` Hook 仅在 Canary 与 experimental 渠道中可用。参阅 [React 发布渠道](/community/versioning-policy#all-release-channels) 以了解更多信息。

</Canary>

Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/react/useOptimistic.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ canary: true

<Canary>

The `useOptimistic` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
The `useOptimistic` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).

</Canary>

Expand All @@ -27,7 +27,7 @@ The `useOptimistic` Hook is currently only available in React's canary and exper

### `useOptimistic(state, updateFn)` {/*use*/}

`useOptimistic` is a React hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.

This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete.

Expand Down