diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index bdb08336e2..9deaf808fc 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -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) 文档。 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index e6b1b05371..937d5c9175 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -649,7 +649,7 @@ button { - Refs 是一个通用概念，但大多数情况下你会使用它们来保存 DOM 元素。 - 你通过传递 `
` 指示 React 将 DOM 节点放入 `myRef.current`。 - 通常，你会将 refs 用于非破坏性操作，例如聚焦、滚动或测量 DOM 元素。 -- 默认情况下，组件不暴露其 DOM 节点。 你可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。 +- 默认情况下，组件不暴露其 DOM 节点。 你可以通过使用 `ref` 属性来暴露 DOM 节点。 - 避免更改由 React 管理的 DOM 节点。 - 如果你确实修改了 React 管理的 DOM 节点，请修改 React 没有理由更新的部分。 @@ -1051,7 +1051,7 @@ img { -你需要 `forwardRef` 来主动从你自己的组件中暴露一个 DOM 节点，比如 `SearchInput`。 +你需要使用 `ref` 属性来主动从你自己的组件中暴露一个 DOM 节点，比如 `SearchInput`。 @@ -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 ( - - ); - } -); +export default function SearchInput({ ref }) { + return ( + + ); +} ``` ```css diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 7a53a1c425..935ac251db 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -402,7 +402,7 @@ The onCaughtError option is a function called with 1. The error that was thrown. 2. An errorInfo object that contains the componentStack 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: diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index b3c849e724..115e6a4cd2 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -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 ; } diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index 85fca50713..f10f1d4c23 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -52,6 +52,7 @@ React 可以将 `