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
React 19 の React Server Components は安定しており、メジャーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。
371
+
=======
372
+
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.
373
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
366
374
367
375
React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。
<TeamMembername="Lauren Tan"permalink="lauren-tan"photo="/images/team/lauren.jpg"github="poteto"twitter="potetotes"threads="potetotes"bsky="no.lol"title="Engineer at Meta">
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.
50
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
47
51
</TeamMember>
48
52
49
53
<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.
353
+
</Pitfall>
354
+
355
+
You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
356
+
357
+
```js {3-4,9}
358
+
import { useRef } from'react';
359
+
360
+
functionMyInput({ ref }) {
361
+
return<input ref={ref} />;
362
+
}
363
+
364
+
functionMyForm() {
365
+
constinputRef=useRef(null);
366
+
return<MyInput ref={inputRef} />
367
+
}
368
+
```
369
+
370
+
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.
371
+
372
+
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>`.
373
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
349
374
350
375
<Sandpack>
351
376
352
377
```js
353
378
import { useRef } from'react';
354
379
355
-
functionMyInput(props) {
356
-
return<input {...props} />;
380
+
functionMyInput({ ref }) {
381
+
return<input ref={ref} />;
357
382
}
358
383
359
384
exportdefaultfunctionMyForm() {
@@ -376,6 +401,7 @@ export default function MyForm() {
376
401
377
402
</Sandpack>
378
403
404
+
<<<<<<< HEAD
379
405
問題に気付きやすくするため、React はコンソールにもエラーを出力します。
380
406
381
407
<ConsoleBlocklevel="error">
@@ -433,31 +459,33 @@ export default function Form() {
433
459
434
460
デザインシステムにおいて、ボタン、入力フィールドなどの低レベルなコンポーネントが、内部の DOM ノードに ref を転送することは一般的なパターンです。一方、フォーム、リスト、ページセクションなどの高レベルなコンポーネントは、DOM 構造への偶発的な依存関係を避けるため、通常は DOM ノードを公開しません。
435
461
462
+
=======
463
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
436
464
<DeepDive>
437
465
438
466
#### 命令型ハンドルで 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.
512
+
>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
483
513
484
514
</DeepDive>
485
515
@@ -591,7 +621,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.
0 commit comments