@@ -646,12 +646,21 @@ button {
646646
647647<Recap >
648648
649+ <<<<<<< HEAD
649650- Refs 是一个通用概念,但大多数情况下你会使用它们来保存 DOM 元素。
650651- 你通过传递 ` <div ref={myRef}> ` 指示 React 将 DOM 节点放入 ` myRef.current ` 。
651652- 通常,你会将 refs 用于非破坏性操作,例如聚焦、滚动或测量 DOM 元素。
652653- 默认情况下,组件不暴露其 DOM 节点。 你可以通过使用 ` forwardRef ` 并将第二个 ` ref ` 参数传递给特定节点来暴露 DOM 节点。
653654- 避免更改由 React 管理的 DOM 节点。
654655- 如果你确实修改了 React 管理的 DOM 节点,请修改 React 没有理由更新的部分。
656+ =======
657+ - Refs are a generic concept, but most often you'll use them to hold DOM elements.
658+ - You instruct React to put a DOM node into ` myRef.current ` by passing ` <div ref={myRef}> ` .
659+ - Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
660+ - A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the ` ref ` prop.
661+ - Avoid changing DOM nodes managed by React.
662+ - If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
663+ >>>>>>> fc29603434ec04621139738f4740caed89d659a7
655664
656665</Recap >
657666
@@ -1051,7 +1060,11 @@ img {
10511060
10521061<Hint >
10531062
1063+ <<<<<<< HEAD
10541064你需要 ` forwardRef ` 来主动从你自己的组件中暴露一个 DOM 节点,比如 ` SearchInput ` 。
1065+ =======
1066+ You'll need to pass ` ref ` as a prop to opt into exposing a DOM node from your own component like ` SearchInput ` .
1067+ >>>>>>> fc29603434ec04621139738f4740caed89d659a7
10551068
10561069</Hint >
10571070
@@ -1136,6 +1149,7 @@ export default function SearchButton({ onClick }) {
11361149```
11371150
11381151``` js src/SearchInput.js
1152+ <<<<<< < HEAD
11391153import { forwardRef } from ' react' ;
11401154
11411155export default forwardRef (
@@ -1148,6 +1162,16 @@ export default forwardRef(
11481162 );
11491163 }
11501164);
1165+ ====== =
1166+ export default function SearchInput ({ ref }) {
1167+ return (
1168+ < input
1169+ ref= {ref}
1170+ placeholder= " Looking for something?"
1171+ / >
1172+ );
1173+ }
1174+ >>>>>> > fc29603434ec04621139738f4740caed89d659a7
11511175```
11521176
11531177``` css
0 commit comments