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..345d0a0e60 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 @@ -65,9 +65,15 @@ This error message will only be shown once per install. 针对现有应用,以下指南将协助你迁移至构建工具: +<<<<<<< HEAD * [Create React App 到 Vite 迁移指南](https://www.robinwieruch.de/vite-create-react-app/) * [Create React App 到 Parcel 迁移指南](https://stackoverflow.com/a/49605484) * [Create React App 到 Rsbuild 迁移指南](https://rsbuild.dev/guide/migration/cra) +======= +* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/) +* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/) +* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra) +>>>>>>> a42121e4793f3144a2f00b5862de974bc2da87a3 为帮助开发者快速上手 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..1aaffddcbb 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -646,12 +646,21 @@ button { +<<<<<<< HEAD - Refs 是一个通用概念,但大多数情况下你会使用它们来保存 DOM 元素。 - 你通过传递 `
` 指示 React 将 DOM 节点放入 `myRef.current`。 - 通常,你会将 refs 用于非破坏性操作,例如聚焦、滚动或测量 DOM 元素。 - 默认情况下,组件不暴露其 DOM 节点。 你可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。 - 避免更改由 React 管理的 DOM 节点。 - 如果你确实修改了 React 管理的 DOM 节点,请修改 React 没有理由更新的部分。 +======= +- Refs are a generic concept, but most often you'll use them to hold DOM elements. +- You instruct React to put a DOM node into `myRef.current` by passing `
`. +- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements. +- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop. +- Avoid changing DOM nodes managed by React. +- If you do modify DOM nodes managed by React, modify parts that React has no reason to update. +>>>>>>> a42121e4793f3144a2f00b5862de974bc2da87a3 @@ -1051,7 +1060,11 @@ img { +<<<<<<< HEAD 你需要 `forwardRef` 来主动从你自己的组件中暴露一个 DOM 节点,比如 `SearchInput`。 +======= +You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`. +>>>>>>> a42121e4793f3144a2f00b5862de974bc2da87a3 @@ -1136,6 +1149,7 @@ export default function SearchButton({ onClick }) { ``` ```js src/SearchInput.js +<<<<<<< HEAD import { forwardRef } from 'react'; export default forwardRef( @@ -1148,6 +1162,16 @@ export default forwardRef( ); } ); +======= +export default function SearchInput({ ref }) { + return ( + + ); +} +>>>>>>> a42121e4793f3144a2f00b5862de974bc2da87a3 ``` ```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: