From 03180afa16907f3b42a04bd28852e1e0be306830 Mon Sep 17 00:00:00 2001 From: seiyatakahashi Date: Mon, 4 May 2020 01:03:11 +0900 Subject: [PATCH 01/11] #4 react-v16.13.0.md add japanese transration --- content/blog/2020-02-26-react-v16.13.0.md | 71 ++++++++++++----------- 1 file changed, 38 insertions(+), 33 deletions(-) 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..1abcfa1ba 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} -### Warnings for some updates during render {#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} -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プロパティのlonghandとshorthandを含む `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プロパティのshortandとlonghandのバージョンを`style`プロップに混在させないようにしてください。 ### Warnings for some deprecated string refs {#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 Refs は古いバージョンのAPI](/docs/refs-and-the-dom.html#legacy-api-string-refs)は開発者に気に入れられておらず、将来的には非推奨になりそうです。 ```js
``` -この `
` は `toggle` の値に関係なく常に背景色が赤になると思っていたかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で交互に変更すると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に変更されます。 - +この`
`は`toggle`の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle`の値を `true`と`false`の間で切り替えると、背景色は`red`から始まり、その後`transparent`と`blue`の間で交互に切り替わります。 -**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。** -警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンを`style`プロップに混在させないようにしてください。 +**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを `style` プロパティ内で混在させないようにしてください。 ### 一部の非推奨 string ref に関する注意点 {#warnings-for-some-deprecated-string-refs} -[String Refs は古いバージョンのAPI](/docs/refs-and-the-dom.html#legacy-api-string-refs)は開発者に気に入れられておらず、将来的には非推奨になりそうです。 +[String ref（文字列形式の ref）は古いレガシー API](/docs/refs-and-the-dom.html#legacy-api-string-refs)であり、既に勧められておらず、将来的に正式に非推奨となる予定です。 ```js
``` -この`
`は`toggle`の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle`の値を `true`と`false`の間で切り替えると、背景色は`red`から始まり、その後`transparent`と`blue`の間で交互に切り替わります。 +この `
` は `toggle` の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で切り替えると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に切り替わります。 **Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを `style` プロパティ内で混在させないようにしてください。 @@ -46,7 +46,7 @@ Warning: Cannot update a component from inside the function body of a different