diff --git a/README.md b/README.md index 0975e7c94..fc38243c4 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b9725..26d46bd2f 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index d39e29ac6..6d2c92abb 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -113,7 +113,7 @@ npx codemod@latest react/19/migration-recipe - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) -- [`prop-types-typescript`](TODO) +- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript) これには TypeScript 関連の変更は含まれていません。以下の [TypeScript 関連の変更](#typescript-changes)を参照してください。 diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 5ba830c3d..f9f21c1e0 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -362,7 +362,7 @@ React 19 には、Canary チャンネルにあったすべての React Server Co #### サーバコンポーネントのサポートを追加する方法 {/*how-do-i-build-support-for-server-components*/} -React 19 の React Server Components は安定しており、メジャーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。 +React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。 React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。 @@ -807,4 +807,4 @@ React におけるカスタム要素のサポートに関し、設計と実装 #### アップグレード方法 {/*how-to-upgrade*/} アップグレードに関するステップバイステップのガイドや、重要な変更点の完全なリストについては、[React 19 アップグレードガイド](/blog/2024/04/25/react-19-upgrade-guide)を参照してください。 -_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ \ No newline at end of file +_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index e0d273fd1..f4c40ca34 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,62 +10,73 @@ title: React カンファレンス ## Upcoming Conferences {/*upcoming-conferences*/} -### React Universe Conf 2024 {/*react-universe-conf-2024*/} -September 5-6, 2024. Wrocław, Poland. +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) -[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) -### React Alicante 2024 {/*react-alicante-2024*/} -September 19-21, 2024. Alicante, Spain. +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote -[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) -### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} -October 04 - 05, 2024. Nairobi, Kenya +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) -[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) -### React India 2024 {/*react-india-2024*/} -October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day +## Past Conferences {/*past-conferences*/} -[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +### React Africa 2024 {/*react-africa-2024*/} +November 29, 2024. In-person in Casablanca, Morocco (hybrid event) -### React Brussels 2024 {/*react-brussels-2024*/} -October 18, 2024. In-person in Brussels, Belgium (hybrid event) +[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) -[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) -### reactjsday 2024 {/*reactjsday-2024*/} -October 25, 2024. In-person in Verona, Italy + online (hybrid event) +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) -[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) ### React Advanced London 2024 {/*react-advanced-london-2024*/} October 25 & 28, 2024. In-person in London, UK + online (hybrid event) [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) -### React Native London Conf 2024 {/*react-native-london-2024*/} -November 14 & 15, 2024. In-person in London, UK +### reactjsday 2024 {/*reactjsday-2024*/} +October 25, 2024. In-person in Verona, Italy + online (hybrid event) -[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) +[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) -### React Summit US 2024 {/*react-summit-us-2024*/} -November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) +### React Brussels 2024 {/*react-brussels-2024*/} +October 18, 2024. In-person in Brussels, Belgium (hybrid event) -[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) -### React Africa 2024 {/*react-africa-2024*/} -November 29, 2024. In-person in Casablanca, Morocco (hybrid event) +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day -[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -### React Day Berlin 2024 {/*react-day-berlin-2024*/} -December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} +October 04 - 05, 2024. Nairobi, Kenya -[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) -## Past Conferences {/*past-conferences*/} ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA diff --git a/src/content/community/team.md b/src/content/community/team.md index 136f0726c..05c528721 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -43,7 +43,7 @@ React コアチームのメンバーは、コアコンポーネントの API、R - Lauren のプログラミングキャリアは `` タグを初めて見たときにピークを迎えました。それ以来、彼女はその時の高揚感を追い続けています。大学ではコンピュータサイエンスではなく経済学を学んでいたため、コーディングは Java ではなく Excel で学びました。Lauren はチャットでお茶目なミームを投下したり、パートナとゲームを楽しんだり、犬の Zelda を可愛がったりするのが好きです。 + Lauren のプログラミングキャリアは `` タグを初めて見たときにピークを迎えました。それ以来、彼女はその時の高揚感を追い続けています。大学ではコンピュータサイエンスではなく経済学を学んでいたため、コーディングは Excel で学びました。Lauren はチャットでお茶目なミームを投下したり、パートナとゲームを楽しんだり、韓国語を学んだり、犬の Zelda を可愛がったりするのが好きです。 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 66aece1a8..53535f956 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -343,75 +343,39 @@ Strict Mode が有効の場合、ref コールバックは開発環境で 2 回 ## 別のコンポーネントの DOM ノードにアクセスする {/*accessing-another-components-dom-nodes*/} -`` のようなブラウザ要素を出力する組み込みコンポーネントに ref を置いた場合、React はその ref の `current` プロパティを、対応する DOM ノード（ブラウザの実際の `` など）にセットします。 + +ref は避難ハッチです。他のコンポーネントの DOM ノードを手作業で書き換えるとコードは壊れやすくなってしまいます。 + -ただし、**独自の**コンポーネント、例えば `` に ref を置こうとすると、デフォルトでは `null` が返されます。以下はそれを示す例です。ボタンをクリックしても入力フィールドにフォーカスが当たらないことに注意してください。 +親コンポーネントからは、[普通の props と全く同じやり方で](/learn/passing-props-to-a-component)子コンポーネントに ref を渡すことができます。 - - -```js +```js {3-4,9} import { useRef } from 'react'; -function MyInput(props) { - return ; +function MyInput({ ref }) { + return ; } -export default function MyForm() { +function MyForm() { const inputRef = useRef(null); - - function handleClick() { - inputRef.current.focus(); - } - - return ( - <> - - - - ); + return } ``` - - -問題に気付きやすくするため、React はコンソールにもエラーを出力します。 - - - -Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - - - -これは、デフォルトでは React は、コンポーネントが他のコンポーネントの DOM ノードにアクセスできないようにしているためです。自分自身の子でさえもです！ これは意図的なものです。ただでさえ ref は控えめに使うべき避難ハッチ (escape hatch) です。*別の*コンポーネントの DOM ノードまで手動で操作できてしまうと、コードがさらに壊れやすくなってしまいます。 - -代わりに、内部の DOM ノードを*意図的に*公開したいコンポーネントは、そのことを**明示的に許可**する必要があります。コンポーネントは、自身が受け取った ref を子のいずれかに「転送 (forward)」するよう指定できます。`MyInput` が `forwardRef` API を使ってこれをどのように行うのか見てみましょう。 - -```js -const MyInput = forwardRef((props, ref) => { - return ; -}); -``` - -以下が動作の仕組みです。 - -1. `` は、対応する DOM ノードを `inputRef.current` に入れるように React に指示する。ただしそれを許可するかどうかは `MyInput` 次第であり、デフォルトでは許可しない。 -2. `MyInput` コンポーネントは `forwardRef` を使って宣言されている。**これにより、上記の `inputRef` を `props` の後に宣言された 2 番目の `ref` 引数として受け取るよう、明示的に許可している**。 -3. `MyInput` 自体は、受け取った `ref` を内部の `` に渡す。 +上記の例では、ref が親コンポーネントである `MyForm` で作成されており、それが子コンポーネントである `MyInput` に渡されています。`MyInput` は更にその ref を `` に受け渡しています。`` は[組み込みコンポーネント](/reference/react-dom/components/common)なので、React は ref の `.current` プロパティに `` DOM 要素を代入します。 -これで、ボタンをクリックして入力にフォーカスを当てることができます。 +これで `MyForm` で作られた `inputRef` は、`MyInput` から返される `` DOM 要素を指し示すようになります。`MyForm` で作成されたクリックハンドラは `inputRef` にアクセスして `focus()` を呼び出し、`` にフォーカスを設定できるようになります。 ```js -import { forwardRef, useRef } from 'react'; +import { useRef } from 'react'; -const MyInput = forwardRef((props, ref) => { - return ; -}); +function MyInput({ ref }) { + return ; +} -export default function Form() { +export default function MyForm() { const inputRef = useRef(null); function handleClick() { @@ -431,24 +395,18 @@ export default function Form() { -デザインシステムにおいて、ボタン、入力フィールドなどの低レベルなコンポーネントが、内部の DOM ノードに ref を転送することは一般的なパターンです。一方、フォーム、リスト、ページセクションなどの高レベルなコンポーネントは、DOM 構造への偶発的な依存関係を避けるため、通常は DOM ノードを公開しません。 - #### 命令型ハンドルで API の一部を公開する {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} -上記の例では、`MyInput` は元の DOM の input 要素を公開しています。これにより親コンポーネント側からその要素の `focus()` を呼び出すことができます。しかしこれにより、親コンポーネントが他のこと、例えば、CSS スタイルを変更することもできてしまいます。一般的なことではありませんが、公開される機能を制限したいということがあります。それには `useImperativeHandle` を使います。 +上記の例では、`MyInput` に渡された ref が本来の DOM 要素である input に受け渡されています。これにより親コンポーネント側からその要素の `focus()` を呼び出すことができます。しかしこれにより、親コンポーネントが他のこと、例えば、CSS スタイルを変更することもできてしまいます。一般的なことではありませんが、公開される機能を制限したいということがあります。それには [`useImperativeHandle`](/reference/react/useImperativeHandle) を使います。 ```js -import { - forwardRef, - useRef, - useImperativeHandle -} from 'react'; +import { useRef, useImperativeHandle } from "react"; -const MyInput = forwardRef((props, ref) => { +function MyInput({ ref }) { const realInputRef = useRef(null); useImperativeHandle(ref, () => ({ // Only expose focus and nothing else @@ -456,8 +414,8 @@ const MyInput = forwardRef((props, ref) => { realInputRef.current.focus(); }, })); - return ; -}); + return ; +}; export default function Form() { const inputRef = useRef(null); @@ -469,9 +427,7 @@ export default function Form() { return ( <> - + ); } @@ -479,7 +435,7 @@ export default function Form() { -ここでは、`MyInput` 内の `realInputRef` が本物の DOM の input ノードを保持しています。ただし、`useImperativeHandle` は、親コンポーネントに対して渡す ref の値として、独自の特別なオブジェクトを使うよう、React に指示します。そのため、`Form` コンポーネント内の `inputRef.current` には `focus` メソッドのみが含まれます。この例での、ref "handle" とは DOM ノードではなく、`useImperativeHandle` の呼び出し内で作成するカスタムオブジェクトです。 +ここでは、`MyInput` 内の `realInputRef` が本物の DOM の input ノードを保持しています。ただし、[`useImperativeHandle`](/reference/react/useImperativeHandle) は、親コンポーネントに対して渡す ref の値として、独自の特別なオブジェクトを使うよう、React に指示します。そのため、`Form` コンポーネント内の `inputRef.current` には `focus` メソッドのみが含まれます。この例での、ref "handle" とは DOM ノードではなく、[`useImperativeHandle`](/reference/react/useImperativeHandle) の呼び出し内で作成するカスタムオブジェクトです。 @@ -591,7 +547,7 @@ export default function TodoList() { const newTodo = { id: nextId++, text: text }; flushSync(() => { setText(''); - setTodos([ ...todos, newTodo]); + setTodos([ ...todos, newTodo]); }); listRef.current.lastChild.scrollIntoView({ behavior: 'smooth', diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index fbe0b0602..d2b979b4d 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -347,7 +347,7 @@ React Comiler は多くの React のルールを静的に検証でき、エラ ### コンポーネントが最適化されたかどうかを知る方法 {/*how-do-i-know-my-components-have-been-optimized*/} -[React Devtools](/learn/react-developer-tools) (v5.0+) には React Compiler のサポートが組み込まれており、コンパイラによって最適化されたコンポーネントの横に "Memo ✨" バッジが表示されます。 +[React DevTools](/learn/react-developer-tools) (v5.0+) と [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) には React Compiler のサポートが組み込まれており、コンパイラによって最適化されたコンポーネントの横に "Memo ✨" バッジが表示されます。 ### コンパイル後に何かが動作しない場合 {/*something-is-not-working-after-compilation*/} eslint-plugin-react-compiler がインストールされている場合、コンパイラはエディタ内で React のルールに対する違反を表示します。これが表示された場合、コンパイラはそのコンポーネントやフックの最適化をスキップしたという意味です。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。**すべての ESLint 違反をすぐに修正する必要はありません**。自分のペースで対応して、最適化されるコンポーネントやフックの数を増やしていくことができます。 diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index b61e367f1..5694d46f9 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -53,24 +53,9 @@ react-devtools ![スタンドアロン版 React Developer Tools](/images/docs/react-devtools-standalone.png) ## モバイル (React Native) {/*mobile-react-native*/} -React Developer Tools は [React Native](https://reactnative.dev/) を使って構築されたアプリの調査にも利用できます。 -React Developer Tools を最も簡単に使う方法は、グローバルにインストールすることです。 -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -次に、ターミナルから開発者ツールを開きます。 -```bash -react-devtools -``` - -これで、実行中のローカルな React Native アプリに接続されるはずです。 +[React Native](https://reactnative.dev/) で作成するアプリの調査を行う場合は、React Developer Tools と密に統合された組み込みデバッガである [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools) を使用できます。要素のハイライトや選択を含むすべての機能が、ブラウザ版の機能拡張と同様に動作します。 -> 数秒待っても開発者ツールが接続されない場合は、アプリをリロードしてみてください。 +[React Native のデバッグについてさらに読む](https://reactnative.dev/docs/debugging) -[React Native のデバッグについてもっと学ぶ](https://reactnative.dev/docs/debugging) +> 0.76 より前のバージョンの React Native の場合は、上記の [Safari および他のブラウザ](#safari-and-other-browsers)のガイドに従ってスタンドアロン版の React DevTools を使用してください。 \ No newline at end of file diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 9fded74e5..4c3437513 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -50,7 +50,7 @@ title: "
" ### クライアント上でフォーム送信を処理する {/*handle-form-submission-on-the-client*/} -フォームの `action` プロパティに関数を渡すことで、フォームが送信されたときにその関数が実行されるようにします。この関数には [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) が引数として渡されるため、フォームが送信したデータにアクセスできます。これは URL のみを受け付ける本来の [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action) とは異なる、独自の動作です。 +フォームの `action` プロパティに関数を渡すことで、フォームが送信されたときにその関数が実行されるようにします。この関数には [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) が引数として渡されるため、フォームが送信したデータにアクセスできます。これは URL のみを受け付ける本来の [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action) とは異なる、独自の動作です。`action` に指定された関数が成功した後、非制御のフィールド要素はすべてリセットされます。 @@ -117,7 +117,7 @@ function AddToCart({productId}) { } ``` -[サーバコンポーネント](/reference/rsc/use-client) によって `` をレンダーし、`` の `action` に[サーバ関数](/reference/rsc/server-function)を渡すことで、フォームの[プログレッシブエンハンスメント](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)が有効になります。 +[サーバコンポーネント](/reference/rsc/use-client) によって `` をレンダーし、`` の `action` に[サーバ関数](/reference/rsc/server-functions)を渡すことで、フォームの[プログレッシブエンハンスメント](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)が有効になります。 ### フォームの送信中状態を表示する {/*display-a-pending-state-during-form-submission*/} フォームが送信されている間に保留 (pending) 状態を表示するには、`` 内でレンダーされるコンポーネントで `useFormStatus` フックを呼び出して、返された `pending` プロパティを読み取ります。 diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index af7a84fd8..57981ba4b 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -153,8 +153,6 @@ export default function SiteMapPage() { スタイルシートは互いに競合することがあり、その場合ブラウザはドキュメント内で後に来るものを採用します。React では props である `precedence` を使用してスタイルシートの順序を制御できます。以下の例では 2 つのコンポーネントがスタイルシートをレンダーしています。優先度の高いリンクをレンダーしているコンポーネントが先に来ていますが、ドキュメント内では後に配置されます。 -{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/} - ```js src/App.js active @@ -165,23 +163,30 @@ export default function HomePage() { + ... ); } function FirstComponent() { - return ; + return ; } function SecondComponent() { - return ; + return ; +} + +function ThirdComponent() { + return ; } ``` +`precedence` として指定する値自体は任意であり、何を指定するかは自由であることに注意してください。React は最初に現れた値を「低優先度」と考え、後に現れたものを「高優先度」と見なします。 + ### スタイルシートレンダーの重複解消処理 {/*deduplicated-stylesheet-rendering*/} 複数のコンポーネントが同じスタイルシートをレンダーする場合、React はドキュメントの head 内に `` をひとつだけ配置します。 diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index 82df304f1..aa9c9641d 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -62,7 +62,11 @@ React は `