Skip to content
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
2 changes: 1 addition & 1 deletion src/content/blog/2025/02/14/sunsetting-create-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ This error message will only be shown once per install.
针对现有应用,以下指南将协助你迁移至构建工具:

* [Create React App 到 Vite 迁移指南](https://www.robinwieruch.de/vite-create-react-app/)
* [Create React App 到 Parcel 迁移指南](https://stackoverflow.com/a/49605484)
* [Create React App 到 Parcel 迁移指南](https://parceljs.org/migration/cra/)
* [Create React App 到 Rsbuild 迁移指南](https://rsbuild.dev/guide/migration/cra)

为帮助开发者快速上手 Vite、Parcel 或 Rsbuild,我们新增了 [从零开始构建 React 应用](/learn/build-a-react-app-from-scratch) 文档。
Expand Down
24 changes: 10 additions & 14 deletions src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -649,7 +649,7 @@ button {
- Refs 是一个通用概念,但大多数情况下你会使用它们来保存 DOM 元素。
- 你通过传递 `<div ref={myRef}>` 指示 React 将 DOM 节点放入 `myRef.current`。
- 通常,你会将 refs 用于非破坏性操作,例如聚焦、滚动或测量 DOM 元素。
- 默认情况下,组件不暴露其 DOM 节点。 你可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。
- 默认情况下,组件不暴露其 DOM 节点。 你可以通过使用 `ref` 属性来暴露 DOM 节点。
- 避免更改由 React 管理的 DOM 节点。
- 如果你确实修改了 React 管理的 DOM 节点,请修改 React 没有理由更新的部分。

Expand Down Expand Up @@ -1051,7 +1051,7 @@ img {

<Hint>

你需要 `forwardRef` 来主动从你自己的组件中暴露一个 DOM 节点,比如 `SearchInput`。
你需要使用 `ref` 属性来主动从你自己的组件中暴露一个 DOM 节点,比如 `SearchInput`。

</Hint>

Expand Down Expand Up @@ -1136,18 +1136,14 @@ export default function SearchButton({ onClick }) {
```

```js src/SearchInput.js
import { forwardRef } from 'react';

export default forwardRef(
function SearchInput(props, ref) {
return (
<input
ref={ref}
placeholder="找什么呢?"
/>
);
}
);
export default function SearchInput({ ref }) {
return (
<input
ref={ref}
placeholder="找什么呢?"
/>
);
}
```

```css
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/client/hydrateRoot.md
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with
1. The <CodeStep step={2}>error</CodeStep> that was thrown.
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.

Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system:
Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:

<Sandpack>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export default function App() {
]);
async function sendMessage(formData) {
const sentMessage = await deliverMessage(formData.get("message"));
setMessages([...messages, { text: sentMessage }]);
setMessages((messages) => [...messages, { text: sentMessage }]);
}
return <Thread messages={messages} sendMessage={sendMessage} />;
}
Expand Down
1 change: 1 addition & 0 deletions src/content/reference/react-dom/components/style.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ React 可以将 `<style>` 组件移动到文档的 `<head>` 中,去重相同
这种特殊处理带来两个注意事项:

* 在样式被渲染后,React 将忽略属性的更改(React 在开发环境中会对这种情况发出警告)。
* 当设置了 `precedence` 属性的时候,React 会丢弃除了 `href` 和 `precedence` 的之外所有无关属性。
* 即使渲染它的组件已被卸载,React 也可能将样式保留在 DOM 中。

---
Expand Down