You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
Copy file name to clipboardExpand all lines: src/content/community/team.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ React 核心团队成员全职致力于核心组件 API 的开发，负责 React
43
43
</TeamMember>
44
44
45
45
<TeamMembername="Lauren Tan"permalink="lauren-tan"photo="/images/team/lauren.jpg"github="poteto"twitter="potetotes"threads="potetotes"bsky="no.lol"title="Engineer at Meta">
46
-
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda.
46
+
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
47
47
</TeamMember>
48
48
49
49
<TeamMembername="Luna Wei"permalink="luna-wei"photo="/images/team/luna-wei.jpg"github="lunaleaps"twitter="lunaleaps"threads="lunaleaps"title="Engineer at Meta">
Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
355
+
</Pitfall>
356
+
357
+
You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
358
+
359
+
```js {3-4,9}
360
+
import { useRef } from'react';
361
+
362
+
functionMyInput({ ref }) {
363
+
return<input ref={ref} />;
364
+
}
365
+
366
+
functionMyForm() {
367
+
constinputRef=useRef(null);
368
+
return<MyInput ref={inputRef} />
369
+
}
370
+
```
371
+
372
+
In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
373
+
374
+
The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
375
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
351
376
352
377
<Sandpack>
353
378
354
379
```js
355
380
import { useRef } from'react';
356
381
357
-
functionMyInput(props) {
358
-
return<input {...props} />;
382
+
functionMyInput({ ref }) {
383
+
return<input ref={ref} />;
359
384
}
360
385
361
386
exportdefaultfunctionMyForm() {
@@ -378,6 +403,7 @@ export default function MyForm() {
378
403
379
404
</Sandpack>
380
405
406
+
<<<<<<< HEAD
381
407
为了帮助你注意到这个问题，React 还会向控制台打印一条错误消息：
382
408
383
409
<ConsoleBlocklevel="error">
@@ -435,31 +461,33 @@ export default function Form() {
435
461
436
462
在设计系统中，将低级组件（如按钮、输入框等）的 ref 转发到它们的 DOM 节点是一种常见模式。另一方面，像表单、列表或页面段落这样的高级组件通常不会暴露它们的 DOM 节点，以避免对 DOM 结构的意外依赖。
437
463
464
+
=======
465
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
438
466
<DeepDive>
439
467
440
468
#### 使用命令句柄暴露一部分 API {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
520
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
485
521
486
522
</DeepDive>
487
523
@@ -593,7 +629,7 @@ export default function TodoList() {
[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,7 +50,7 @@ To create interactive controls for submitting information, render the [built-in
50
50
51
51
### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
52
52
53
-
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs.
53
+
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
54
54
55
55
<Sandpack>
56
56
@@ -117,7 +117,7 @@ function AddToCart({productId}) {
117
117
}
118
118
```
119
119
120
-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
120
+
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
121
121
122
122
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
123
123
To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
0 commit comments