diff --git a/content/blog/2020-02-26-react-v16.13.0.md b/content/blog/2020-02-26-react-v16.13.0.md index 7ce520c13..946f2f874 100644 --- a/content/blog/2020-02-26-react-v16.13.0.md +++ b/content/blog/2020-02-26-react-v16.13.0.md @@ -5,25 +5,25 @@ redirect_from: - "blog/2020/03/02/react-v16.13.0.html" --- -Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release. +本日、React 16.13.0 をリリースします。このリリースには、バグ修正と、今後のメジャーリリースに備えるための新しい非推奨の警告が含まれています。 -## New Warnings {#new-warnings} +## 新たな警告 {#new-warnings} -### Warnings for some updates during render {#warnings-for-some-updates-during-render} +### レンダリング中のいくつかの更新に関する警告 {#warnings-for-some-updates-during-render} -A React component should not cause side effects in other components during rendering. +React コンポーネントは、レンダー中に他のコンポーネントに副作用を起こしてはいけません。 -It is supported to call `setState` during render, but [only for *the same component*](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). If you call `setState` during a render on a different component, you will now see a warning: +レンダー中に `setState` を呼び出すことはサポートされていますが[*同じ*コンポーネントに対してのみ](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops)可能です。別のコンポーネントのレンダー中に `setState` を呼び出すと、警告が表示されるようになりました。 ``` Warning: Cannot update a component from inside the function body of a different component. ``` -**This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`. +**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、`setState` 呼び出しを `useEffect` にラップすることができます。 -### Warnings for conflicting style rules {#warnings-for-conflicting-style-rules} +### スタイルルールが矛盾している場合の警告 {#warnings-for-conflicting-style-rules} -When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example: +ある CSS プロパティの長い記法と短い記法を同時に含む `style` を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。 ```js
``` -You might expect this `
` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub). +この `
` は `toggle` の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で切り替えると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に切り替わります。 -**React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop. +**React は、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを `style` プロパティ内で混在させないようにしてください。 -### Warnings for some deprecated string refs {#warnings-for-some-deprecated-string-refs} +### 一部の非推奨 string ref に関する注意点 {#warnings-for-some-deprecated-string-refs} -[String Refs is an old legacy API](/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future: +[String ref(文字列形式の ref)は古いレガシー API](/docs/refs-and-the-dom.html#legacy-api-string-refs) であり、既に勧められておらず、将来的に正式に非推奨となる予定です。 ```js