From 93f07120b9c18682d4fe5de74c0cf4c787dc9148 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Sun, 3 Feb 2019 05:38:34 +0900 Subject: [PATCH 01/15] start translation. just copy from crowdin --- content/warnings/dont-call-proptypes.md | 55 ++++++++++++++++++++---- content/warnings/invalid-aria-prop.md | 10 ++++- content/warnings/legacy-factories.md | 25 +++++++++++ content/warnings/refs-must-have-owner.md | 28 ++++++++++++ content/warnings/special-props.md | 8 ++++ content/warnings/unknown-prop.md | 30 +++++++++++++ 6 files changed, 147 insertions(+), 9 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 7eba37090..7c6c6dda1 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -3,18 +3,24 @@ title: Don't Call PropTypes Warning layout: single permalink: warnings/dont-call-proptypes.html --- +PropTypesの呼び出しについての警告 -> Note: +> 注意： > -> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types). +> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。 +> コードを自動で変換するための [codemodスクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 > ->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion. In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error. -### Declaring PropTypes is still fine -The normal usage of PropTypes is still supported: +Reactの将来のメジャーリリースでは、PropTypeによるバリデーション機能の実装コードは、プロダクションビルドから削除される予定です。 +そのときには、これらの関数を手動で呼び出す全てのコード（プロダクションビルドで削除されていないもの）はエラーを投げることになります。 + + +### PropTypes で型を宣言することには問題がありません + +PropTypeの通常の使用法は引き続きサポートされています。 ```javascript Button.propTypes = { @@ -22,11 +28,12 @@ Button.propTypes = { }; ``` -Nothing changes here. +何も変更ありません。 -### Don’t call PropTypes directly +### PropTypes を直接呼び出してはなりません + +React コンポーネントに注釈を付ける以外の方法でのPropTypeの使用はサポートされなくなりました。 -Using PropTypes in any other way than annotating React components with them is no longer supported: ```javascript var apiShape = PropTypes.shape({ @@ -38,14 +45,24 @@ var apiShape = PropTypes.shape({ var error = apiShape(json, 'response'); ``` +この形で PropType を使用をする必要がある場合、PropTypeのフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)2つのパッケージなど）を使用するか、あるいはフォーク版を作成することをお勧めします。 + +警告を修正しなければ、このコードは React 16 のプロダクション環境ではクラッシュします。 + If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages). If you don't fix the warning, this code will crash in production with React 16. +### 直接 PropTypes を呼んでいないのに警告が発生するとき + ### If you don't call PropTypes directly but still get the warning Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example: + +警告によって生成されたスタックトレースを調べます。PropTypesダイレクトコールを担当するコンポーネント定義があります。ほとんどの場合、この問題はReactのPropTypeをラップするサードパーティのPropTypeが原因です。 + + ```js Button.propTypes = { highlighted: ThirdPartyPropTypes.deprecated( @@ -57,12 +74,30 @@ Button.propTypes = { In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it. +このケースでは、 ThirdPartyPropTypes.deprecated が PropTypes.bool を呼び出しているラッパーです。 +このパターンそのものは良いのですが、 React がPropTypesが直接呼び出されたと判断するため偽陽性（呼び出していないのに呼び出したと判定される）を引き起こします。 +次の章では ThirdPartyPropTypes のようなライブラリを実装している場合に、この問題をどのように解決するかについて述べます。 +自身で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 + + ### Fixing the false positive in third party PropTypes + +### サードパーティのPropTypes における誤検知を修正する + If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls. +あなたがサードパーティPropTypes の作者で、利用者に既存の React PropTypesをラップさせる場合、利用者はライブラリから出るこの警告を見かけるようになるでしょう。 +これは React が手動によるPropTypesの呼び出しを検知するために自身が渡す "秘密（secret）"の最後尾の引数を確認できないために起こります。 + + Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments: +以下に修正する方法を示します。 +例として react-bootstrap/react-prop-typesにある deprecated を使用します。 +現時点での実装では単に引数として props 、 propName 、そして componentName 渡しているだけです。 + + ```javascript export default function deprecated(propType, explanation) { return function validate(props, propName, componentName) { @@ -81,6 +116,8 @@ export default function deprecated(propType, explanation) { In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation: +誤検知を修正するために、すべての引数をラップされたPropTypeに渡してください。これはES6 ...rest表記で簡単に行えます。 + ```javascript export default function deprecated(propType, explanation) { return function validate(props, propName, componentName, ...rest) { // Note ...rest here @@ -98,3 +135,5 @@ export default function deprecated(propType, explanation) { ``` This will silence the warning. + +これで警告は出力されなくなります。 diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index 53ebdd9bc..0f42071a7 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -6,6 +6,14 @@ permalink: warnings/invalid-aria-prop.html The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties). +無効なARIAプロパティ（invalid-aria-prop）の警告は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の仕様に無いaria-*プロパティで DOM 要素をレンダリングしようとした場合に発生します。 + 1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled. -2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered \ No newline at end of file +有効な小道具を使用していると思われる場合は、綴りをよく確認してください。aria-labelledbyそしてaria-activedescendantスペルミスがよくあります。 + +2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered + +Reactが指定された属性をまだ認識できない場合。 +React の将来のバージョンで修正される可能性があります。 +しかし、 React は現時点では全ての不明な属性を削除するため、それらを React アプリケーションで指定してもレンダリングされません。 diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index e26fed9de..f8c289666 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -4,8 +4,12 @@ layout: single permalink: warnings/legacy-factories.html --- +React 要素のファクトリと JSX についての警告 + You probably came here because your code is calling your component as a plain function call. This is now deprecated: +このページに来たのは、恐らくコードがコンポーネントの呼び出しを普通の関数呼び出しとして行っているからでしょう。これは現在では非推奨となりました。 + ```javascript var MyComponent = require('MyComponent'); @@ -18,6 +22,8 @@ function render() { React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html). +Reactコンポーネントは、このように直接呼び出すことはできなくなりました。代わりにJSXを使うことができます。 + ```javascript var React = require('react'); var MyComponent = require('MyComponent'); @@ -28,9 +34,12 @@ function render() { ``` ## Without JSX +## JSX を使用しない場合 If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it: +JSX を使いたくない、または使えない場合、コンポーネントを呼び出す前にファクトリにラップする必要があります。 + ```javascript var React = require('react'); var MyComponent = React.createFactory(require('MyComponent')); @@ -42,10 +51,21 @@ function render() { This is an easy upgrade path if you have a lot of existing function calls. +大量の関数呼び出しを抱えている場合には簡単なアップグレード方法となります。 + + ## Dynamic components without JSX +## JSX を使用しない動的なコンポーネント + If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline: + + +動的ソースからコンポーネントクラスを取得する場合は、すぐに呼び出すファクトリを作成する必要はありません。代わりに、要素をインラインで作成することができます。 + + + ```javascript var React = require('react'); @@ -55,5 +75,10 @@ function render(MyComponent) { ``` ## In Depth +## 詳細 + [Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) + +[なぜこの変更を行ったのかについて更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) + diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index e95dff489..1887d925f 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -3,14 +3,19 @@ title: Refs Must Have Owner Warning layout: single permalink: warnings/refs-must-have-owner.html --- +refは所有者が必要であることについての警告 You are probably here because you got one of the following error messages: +このページに来たのは恐らく以下のエラーメッセージの1つが出力されたからでしょう： + *React 16.0.0+* > Warning: > > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). +> 警告: ReactOwner だけが ref を持つことができます。componentの render メソッド内で作成されていないコンポーネントに ref を追加したか、React のコピーを複数ロードしているかもしれません。 + *earlier versions of React* > Warning: > @@ -18,6 +23,9 @@ You are probably here because you got one of the following error messages: This usually means one of three things: +これは通常以下の3つのいずれかを意味します： + + - You are trying to add a `ref` to a function component. - You are trying to add a `ref` to an element that is being created outside of a component's render() function. - You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency) @@ -33,10 +41,16 @@ If `` is a function component, you can't add a ref to it: If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs). +コンポーネントに ref を追加する必要がある場合は、まずクラス型コンポーネントに変換するか、あるいは ref を使わない方法を検討してください。ref は滅多に必要ではありません。 + ## Strings Refs Outside the Render Method +## レンダーメソッド外での文字列 ref の使用 This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work: +これは通常、所有者を持たない（つまり、他のコンポーネントの render メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。 +例えば、以下はうまく動作しません： + ```js // Doesn't work! ReactDOM.render(, el); @@ -44,6 +58,9 @@ ReactDOM.render(, el); Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref: +ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。 + + ```js let app; ReactDOM.render( @@ -56,8 +73,19 @@ ReactDOM.render( Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach. +このようなアプローチにする前に、本当に ref が必要かどうか考慮してください。 + + ## Multiple copies of React +## React の複数のコピー Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems. +Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。 +ref に対して何も（突飛なことを）していないなら、問題が ref についてではなく、複数の React のコピーがプロジェクトにロードされていることである可能性が高いでしょう。 +時に、サードパーティ製のモジュールを npm 経由で追加した場合、依存関係ライブラリの重複したコピーを取得して、問題を引き起こす可能性があります。 + If you are using npm... `npm ls` or `npm ls react` might help illuminate. + +あなたがnpmを使っているならば…、npm lsまたはnpm ls react明かりをつけるのを助けるかもしれない。 + diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 32857abf2..7447739d1 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -4,6 +4,14 @@ layout: single permalink: warnings/special-props.html --- +特別なpropsの警告 + Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component. +JSX要素の大部分の小道具はコンポーネントに渡されますが、Reactによって使用されるため、コンポーネントに転送されない2つの特別な小道具（refとkey）があります。 + + For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. + +たとえばthis.props.key、コンポーネント（つまり、レンダリング関数またはpropType）からアクセスしようとすることは定義されていません。子コンポーネント内で同じ値にアクセスする必要がある場合は、それを別の小道具として渡します（例：）。これは冗長に思えるかもしれませんが、調整のヒントからアプリロジックを切り離すことが重要です。 + diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 783d1b385..6a7f4543b 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,24 +3,47 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- + +不明なプロパティへの警告 + The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around. +不明なプロパティへの警告は React が有効な DOM 属性/プロパティとして認識していないプロパティで、DOM をレンダリングしようとした場合に発生します。 +DOM 要素にまがいものの props が撒き散らされていないか確認してください。 + There are a couple of likely reasons this warning could be appearing: +この警告が出現しそうな理由がいくつかあります： + 1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. [transferring props](/docs/transferring-props.html)). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component. +1. {...this.props} または cloneElement(element, this.props) を使っていませんか？ +あなたのコンポーネントは自身の props を子要素にそのまま転送しています。(例 transferring props)。子要素に props を転送する場合、親コンポーネントが解釈するための props を誤って子に転送していないか確認する必要があります。 + + 2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes). +2. 独自データを表現しようとして、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。標準の DOM 要素に独自形式のデータを追加しようとしているなら、MDN で説明されている通りに独自データ属性を使用するよう検討してください。 + 3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered. +3. Reactが指定された属性をまだ認識できない場合。React の将来のバージョンで修正される可能性があります。しかし、 React は現時点では全ての不明な属性を削除するため、それらを React アプリケーションで指定してもレンダリングされません。 + 4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). +4. 大文字を使わずに React コンポーネントを使おうとしている場合。React では JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いるため、 +小文字のタグは DOM タグとして解釈されてしまいます。 + --- To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example: +これを修正するために、複合コンポーネントは、複合コンポーネントを対象とし、子コンポーネントを対象としていないすべてのプロップを「消費」する必要があります。例： + **Bad:** Unexpected `layout` prop is forwarded to the `div` tag. +悪い例： 予期せず layout プロパティが div タグに転送されています。 + ```js function MyDiv(props) { if (props.layout === 'horizontal') { @@ -35,6 +58,9 @@ function MyDiv(props) { **Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable. +良い例： スプレッド演算子は props から必要な変数だけ取り出して、残りの props を別の変数に入れるのに使用できます。 + + ```js function MyDiv(props) { const { layout, ...rest } = props @@ -48,6 +74,10 @@ function MyDiv(props) { **Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable. +良い例： props を新しいオブジェクトに割り当てて、使用しているキーを新しいオブジェクトから削除することもできます。 +元の this.props オブジェクトはイミュータブルとみなされるべきなので、それから props を削除しないようにしてください。 + + ```js function MyDiv(props) { From e1886139f04113b81c89282484d449337fd45b29 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Sun, 3 Feb 2019 07:37:06 +0900 Subject: [PATCH 02/15] update japanese version, english version is not yet removed. --- content/warnings/dont-call-proptypes.md | 43 ++++++++++-------------- content/warnings/invalid-aria-prop.md | 8 ++--- content/warnings/legacy-factories.md | 18 ++++------ content/warnings/refs-must-have-owner.md | 35 ++++++++++--------- content/warnings/special-props.md | 8 ++--- content/warnings/unknown-prop.md | 27 +++++++-------- 6 files changed, 63 insertions(+), 76 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 7c6c6dda1..88e2289c1 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -3,7 +3,7 @@ title: Don't Call PropTypes Warning layout: single permalink: warnings/dont-call-proptypes.html --- -PropTypesの呼び出しについての警告 +PropTypes を呼び出してはならないという警告。 > 注意： > @@ -14,13 +14,11 @@ PropTypesの呼び出しについての警告 In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error. -Reactの将来のメジャーリリースでは、PropTypeによるバリデーション機能の実装コードは、プロダクションビルドから削除される予定です。 -そのときには、これらの関数を手動で呼び出す全てのコード（プロダクションビルドで削除されていないもの）はエラーを投げることになります。 +Reactの将来のメジャーリリースでは、PropTypeのバリデーションを実装するコードは、プロダクションビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（プロダクションビルドで削除されないもの）はエラーを投げることになります。 +### PropTypes 宣言は問題ない -### PropTypes で型を宣言することには問題がありません - -PropTypeの通常の使用法は引き続きサポートされています。 +PropTypeの通常の使用は引き続きサポートされます。 ```javascript Button.propTypes = { @@ -28,12 +26,11 @@ Button.propTypes = { }; ``` -何も変更ありません。 - -### PropTypes を直接呼び出してはなりません +この場合には何も変更がありません。 -React コンポーネントに注釈を付ける以外の方法でのPropTypeの使用はサポートされなくなりました。 +### PropTypes を直接呼び出さない +React コンポーネントに注釈を付ける以外の方法でPropTypeを使用することはサポートされなくなりました。 ```javascript var apiShape = PropTypes.shape({ @@ -45,23 +42,22 @@ var apiShape = PropTypes.shape({ var error = apiShape(json, 'response'); ``` -この形で PropType を使用をする必要がある場合、PropTypeのフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)2つのパッケージなど）を使用するか、あるいはフォーク版を作成することをお勧めします。 +この形で PropType を使用をする必要がある場合、PropTypeのフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをお勧めします。 -警告を修正しなければ、このコードは React 16 のプロダクション環境ではクラッシュします。 +警告を修正しなければ、このコードは React 16 のプロダクションビルドではクラッシュします。 If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages). If you don't fix the warning, this code will crash in production with React 16. -### 直接 PropTypes を呼んでいないのに警告が発生するとき +### PropTypes を直接呼んでいないのに警告が発生するとき ### If you don't call PropTypes directly but still get the warning Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example: -警告によって生成されたスタックトレースを調べます。PropTypesダイレクトコールを担当するコンポーネント定義があります。ほとんどの場合、この問題はReactのPropTypeをラップするサードパーティのPropTypeが原因です。 - +警告で出力されているスタックトレースを調べると、PropTypesを直接呼んでいるコンポーネント定義を見付けることができるでしょう。ほとんどの場合、ReactのPropTypeをラップするサードパーティのPropTypeが問題の原因です。たとえば、 ```js Button.propTypes = { @@ -74,28 +70,25 @@ Button.propTypes = { In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it. -このケースでは、 ThirdPartyPropTypes.deprecated が PropTypes.bool を呼び出しているラッパーです。 -このパターンそのものは良いのですが、 React がPropTypesが直接呼び出されたと判断するため偽陽性（呼び出していないのに呼び出したと判定される）を引き起こします。 -次の章では ThirdPartyPropTypes のようなライブラリを実装している場合に、この問題をどのように解決するかについて述べます。 -自身で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 +このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため誤検出（呼び出していないのに呼び出したと判定される）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装するときにこの問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 ### Fixing the false positive in third party PropTypes -### サードパーティのPropTypes における誤検知を修正する +### サードパーティの PropTypes における誤検知を修正する If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls. あなたがサードパーティPropTypes の作者で、利用者に既存の React PropTypesをラップさせる場合、利用者はライブラリから出るこの警告を見かけるようになるでしょう。 -これは React が手動によるPropTypesの呼び出しを検知するために自身が渡す "秘密（secret）"の最後尾の引数を確認できないために起こります。 +これは React が手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret` ](https://github.com/facebook/react/pull/7132)を確認できないために起こります。 Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments: -以下に修正する方法を示します。 -例として react-bootstrap/react-prop-typesにある deprecated を使用します。 -現時点での実装では単に引数として props 、 propName 、そして componentName 渡しているだけです。 +以下に修正方法を示します。 +例として使用しているのは [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。 +現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。 ```javascript @@ -116,7 +109,7 @@ export default function deprecated(propType, explanation) { In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation: -誤検知を修正するために、すべての引数をラップされたPropTypeに渡してください。これはES6 ...rest表記で簡単に行えます。 +誤検知を修正するには、**すべての**引数をラップされたPropTypeに渡してください。これはES6の `...rest` 記法で簡単に行えます。 ```javascript export default function deprecated(propType, explanation) { diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index 0f42071a7..e2bf149fc 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -6,14 +6,12 @@ permalink: warnings/invalid-aria-prop.html The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties). -無効なARIAプロパティ（invalid-aria-prop）の警告は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の仕様に無いaria-*プロパティで DOM 要素をレンダリングしようとした場合に発生します。 +「無効なARIA Props」の警告（invalid-aria-prop）は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled. -有効な小道具を使用していると思われる場合は、綴りをよく確認してください。aria-labelledbyそしてaria-activedescendantスペルミスがよくあります。 +1. 有効であるはずの props を使用している場合は、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered -Reactが指定された属性をまだ認識できない場合。 -React の将来のバージョンで修正される可能性があります。 -しかし、 React は現時点では全ての不明な属性を削除するため、それらを React アプリケーションで指定してもレンダリングされません。 +2. 指定した属性を React がまだ認識できない場合。React の将来のバージョンで修正される可能性は高いでしょう。とはいえ、React は現時点では未知の属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index f8c289666..79bf09343 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -3,12 +3,11 @@ title: React Element Factories and JSX Warning layout: single permalink: warnings/legacy-factories.html --- - -React 要素のファクトリと JSX についての警告 +React Element ファクトリと JSX についての警告。 You probably came here because your code is calling your component as a plain function call. This is now deprecated: -このページに来たのは、恐らくコードがコンポーネントの呼び出しを普通の関数呼び出しとして行っているからでしょう。これは現在では非推奨となりました。 +このページに来たのは、恐らくコードがコンポーネントの呼び出しを普通の関数呼び出ししているからでしょう。これは現在非推奨になっています。 ```javascript var MyComponent = require('MyComponent'); @@ -22,7 +21,7 @@ function render() { React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html). -Reactコンポーネントは、このように直接呼び出すことはできなくなりました。代わりにJSXを使うことができます。 +Reactコンポーネントは、このように直接呼び出すことはできなくなりました。代わりに[JSXを使うことができます](/docs/jsx-in-depth.html)。 ```javascript var React = require('react'); @@ -38,7 +37,7 @@ function render() { If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it: -JSX を使いたくない、または使えない場合、コンポーネントを呼び出す前にファクトリにラップする必要があります。 +JSX を使いたくない、または使えない場合、コンポーネントを呼び出す前にファクトリでラップする必要があります。 ```javascript var React = require('react'); @@ -51,8 +50,7 @@ function render() { This is an easy upgrade path if you have a lot of existing function calls. -大量の関数呼び出しを抱えている場合には簡単なアップグレード方法となります。 - +呼び出しの箇所が大量である場合、この修正方法が簡単です。 ## Dynamic components without JSX @@ -61,9 +59,7 @@ This is an easy upgrade path if you have a lot of existing function calls. If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline: - -動的ソースからコンポーネントクラスを取得する場合は、すぐに呼び出すファクトリを作成する必要はありません。代わりに、要素をインラインで作成することができます。 - +コンポーネントのクラスを動的に取得する場合は、すぐに実行してしまうファクトリを作成する必要はありません。その代わりにインラインで単に要素を作成します。 ```javascript @@ -80,5 +76,5 @@ function render(MyComponent) { [Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) -[なぜこの変更を行ったのかについて更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) +[この変更を行った理由について更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index 1887d925f..c2d90228b 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -3,37 +3,43 @@ title: Refs Must Have Owner Warning layout: single permalink: warnings/refs-must-have-owner.html --- -refは所有者が必要であることについての警告 +refには所有者が必要であることについての警告。 You are probably here because you got one of the following error messages: このページに来たのは恐らく以下のエラーメッセージの1つが出力されたからでしょう： *React 16.0.0+* -> Warning: +> 警告: > > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). +> +> ref 要素が文字列（myRefName）として指定されましたが、所有者が設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。 -> 警告: ReactOwner だけが ref を持つことができます。componentの render メソッド内で作成されていないコンポーネントに ref を追加したか、React のコピーを複数ロードしているかもしれません。 - -*earlier versions of React* +*早期バージョンの React* > Warning: > > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded. +> +> ReactOwner だけが ref を持つことができます。componentの render メソッド内で作成されていないコンポーネントに ref を追加したか、React のコピーを複数ロードしているかもしれません。 -This usually means one of three things: - -これは通常以下の3つのいずれかを意味します： - +これは通常、以下の3つのいずれかを意味します： - You are trying to add a `ref` to a function component. - You are trying to add a `ref` to an element that is being created outside of a component's render() function. - You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency) +- `ref` を関数コンポーネントに追加しようとしている +- コンポーネントの render() 関数の外部で作成されている要素に `ref` を追加しようとしている +- Reactの複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによる）。 + ## Refs on Function Components +## 関数コンポーネントのRefs If `` is a function component, you can't add a ref to it: +``が関数コンポーネントである場合には、refを追加することはできません。 + ```js // Doesn't work if Foo is a function! @@ -41,10 +47,10 @@ If `` is a function component, you can't add a ref to it: If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs). -コンポーネントに ref を追加する必要がある場合は、まずクラス型コンポーネントに変換するか、あるいは ref を使わない方法を検討してください。ref は滅多に必要ではありません。 +コンポーネントに ref を追加する必要がある場合は、クラスコンポーネントに変換するか、あるいは ref を使わない方法を検討してください。[ref が本当に必要](/docs/refs-and-the-dom.html#when-to-use-refs)になることは滅多にありません。 ## Strings Refs Outside the Render Method -## レンダーメソッド外での文字列 ref の使用 +## render メソッド外での文字列 ref の使用 This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work: @@ -82,10 +88,9 @@ Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems. Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。 -ref に対して何も（突飛なことを）していないなら、問題が ref についてではなく、複数の React のコピーがプロジェクトにロードされていることである可能性が高いでしょう。 -時に、サードパーティ製のモジュールを npm 経由で追加した場合、依存関係ライブラリの重複したコピーを取得して、問題を引き起こす可能性があります。 +ref に対して（突飛なことを）何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。 +時に、サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーが問題を引き起こす可能性があります。 If you are using npm... `npm ls` or `npm ls react` might help illuminate. -あなたがnpmを使っているならば…、npm lsまたはnpm ls react明かりをつけるのを助けるかもしれない。 - +npmを使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 7447739d1..3cb1cb317 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -3,15 +3,13 @@ title: Special Props Warning layout: single permalink: warnings/special-props.html --- - -特別なpropsの警告 +特別なpropsの警告。 Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component. -JSX要素の大部分の小道具はコンポーネントに渡されますが、Reactによって使用されるため、コンポーネントに転送されない2つの特別な小道具（refとkey）があります。 +JSX要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない2つの特別な小道具（`ref` と `key`）があります。 For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. -たとえばthis.props.key、コンポーネント（つまり、レンダリング関数またはpropType）からアクセスしようとすることは定義されていません。子コンポーネント内で同じ値にアクセスする必要がある場合は、それを別の小道具として渡します（例：）。これは冗長に思えるかもしれませんが、調整のヒントからアプリロジックを切り離すことが重要です。 - +たとえばコンポーネントから(render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から） `this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値にアクセスする必要がある場合は、別の prop で渡します（例： ``）。これは冗長に思えるかもしれませんが、アプリケーションロジックと突き合わせ処理(reconciling)のためのヒントを分けることは重要です。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 6a7f4543b..50f0649f5 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,13 +3,12 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- - -不明なプロパティへの警告 +不明なプロパティの警告。 The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around. -不明なプロパティへの警告は React が有効な DOM 属性/プロパティとして認識していないプロパティで、DOM をレンダリングしようとした場合に発生します。 -DOM 要素にまがいものの props が撒き散らされていないか確認してください。 +unknown-prop 警告は、DOM 標準仕様で定義された属性/プロパティであるとReactが認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 +該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 There are a couple of likely reasons this warning could be appearing: @@ -17,32 +16,31 @@ There are a couple of likely reasons this warning could be appearing: 1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. [transferring props](/docs/transferring-props.html)). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component. -1. {...this.props} または cloneElement(element, this.props) を使っていませんか？ -あなたのコンポーネントは自身の props を子要素にそのまま転送しています。(例 transferring props)。子要素に props を転送する場合、親コンポーネントが解釈するための props を誤って子に転送していないか確認する必要があります。 +1. `{...this.props}` または `cloneElement(element, this.props)` を使っていませんか？ +あなたのコンポーネントは自身の props を子要素にそのまま転送しています。(例 [propsの転送](/docs/transferring-props.html))。子要素に props を転送する場合、親コンポーネントが解釈すべき props を誤って子に転送していないことを確認する必要があります。 2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes). -2. 独自データを表現しようとして、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。標準の DOM 要素に独自形式のデータを追加しようとしているなら、MDN で説明されている通りに独自データ属性を使用するよう検討してください。 +2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。標準の DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性(data-*)の使用を検討してください。 3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered. -3. Reactが指定された属性をまだ認識できない場合。React の将来のバージョンで修正される可能性があります。しかし、 React は現時点では全ての不明な属性を削除するため、それらを React アプリケーションで指定してもレンダリングされません。 +2. 指定した属性を React がまだ認識できない場合。React の将来のバージョンで修正される可能性は高いでしょう。とはいえ、React は現時点では未知の属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). -4. 大文字を使わずに React コンポーネントを使おうとしている場合。React では JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いるため、 -小文字のタグは DOM タグとして解釈されてしまいます。 +4. 大文字を使わずに React コンポーネントを使おうとしている場合。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。 --- To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example: -これを修正するために、複合コンポーネントは、複合コンポーネントを対象とし、子コンポーネントを対象としていないすべてのプロップを「消費」する必要があります。例： +これを修正するためには、コンポーネントを組合わせるコンポーネントは、自分自身のコンポーネントのためのものであり、子コンポーネントのためのものではないすべての props を「消費」する必要があります。例えば、 **Bad:** Unexpected `layout` prop is forwarded to the `div` tag. -悪い例： 予期せず layout プロパティが div タグに転送されています。 +**悪い例：** 予期せず layout プロパティが div タグに転送されています。 ```js function MyDiv(props) { @@ -58,7 +56,7 @@ function MyDiv(props) { **Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable. -良い例： スプレッド演算子は props から必要な変数だけ取り出して、残りの props を別の変数に入れるのに使用できます。 +**良い例：** スプレッド演算子は props から必要な変数だけ取り出して、残りの props を別の変数に入れるのに使用できます。 ```js @@ -74,8 +72,7 @@ function MyDiv(props) { **Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable. -良い例： props を新しいオブジェクトに割り当てて、使用しているキーを新しいオブジェクトから削除することもできます。 -元の this.props オブジェクトはイミュータブルとみなされるべきなので、それから props を削除しないようにしてください。 +**良い例：** props を新しいオブジェクトに割り当てて(`Object.assign`)、使用しているキーを新しいオブジェクトから削除することもできます。ただし、元の `this.props` オブジェクトは不変オブジェクトとみなされるべきなので、そこから props を削除しないようにしてください。 ```js From b0c40d8946b9a66fd858980e2aa35243716ba2b0 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Sun, 3 Feb 2019 10:34:18 +0900 Subject: [PATCH 03/15] checked with texlint --- content/warnings/dont-call-proptypes.md | 45 ++++--------------- content/warnings/invalid-aria-prop.md | 13 ++---- content/warnings/legacy-factories.md | 26 ++--------- content/warnings/refs-must-have-owner.md | 57 +++++++----------------- content/warnings/special-props.md | 11 ++--- content/warnings/unknown-prop.md | 40 ++++------------- 6 files changed, 42 insertions(+), 150 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 88e2289c1..bed580988 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -3,20 +3,16 @@ title: Don't Call PropTypes Warning layout: single permalink: warnings/dont-call-proptypes.html --- -PropTypes を呼び出してはならないという警告。 +「PropTypes を呼び出してはならない」警告。 > 注意： > > React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。 > コードを自動で変換するための [codemodスクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 -> - -In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error. - Reactの将来のメジャーリリースでは、PropTypeのバリデーションを実装するコードは、プロダクションビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（プロダクションビルドで削除されないもの）はエラーを投げることになります。 -### PropTypes 宣言は問題ない +### PropTypes 宣言については問題ありません PropTypeの通常の使用は引き続きサポートされます。 @@ -26,7 +22,7 @@ Button.propTypes = { }; ``` -この場合には何も変更がありません。 +これについては何も変わっていません。 ### PropTypes を直接呼び出さない @@ -44,20 +40,11 @@ var error = apiShape(json, 'response'); この形で PropType を使用をする必要がある場合、PropTypeのフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをお勧めします。 -警告を修正しなければ、このコードは React 16 のプロダクションビルドではクラッシュします。 - -If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages). - -If you don't fix the warning, this code will crash in production with React 16. +警告に応じてコードを修正しなければ、このコードは React 16 のプロダクションビルドではクラッシュします。 ### PropTypes を直接呼んでいないのに警告が発生するとき -### If you don't call PropTypes directly but still get the warning - -Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example: - - -警告で出力されているスタックトレースを調べると、PropTypesを直接呼んでいるコンポーネント定義を見付けることができるでしょう。ほとんどの場合、ReactのPropTypeをラップするサードパーティのPropTypeが問題の原因です。たとえば、 +警告で出力されているスタックトレースを調べることで、PropTypesを直接呼んでいるコンポーネント定義を見付けることができます。ほとんどの場合、ReactのPropTypeをラップするサードパーティ製のPropTypeが問題の原因です。たとえば、 ```js Button.propTypes = { @@ -68,29 +55,17 @@ Button.propTypes = { } ``` -In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it. - -このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため誤検出（呼び出していないのに呼び出したと判定される）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装するときにこの問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 - - -### Fixing the false positive in third party PropTypes - +このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため、誤検出（=呼び出していないのに呼び出したと判定）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装する際に、この問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 ### サードパーティの PropTypes における誤検知を修正する -If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls. - -あなたがサードパーティPropTypes の作者で、利用者に既存の React PropTypesをラップさせる場合、利用者はライブラリから出るこの警告を見かけるようになるでしょう。 -これは React が手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret` ](https://github.com/facebook/react/pull/7132)を確認できないために起こります。 - - -Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments: +あなたがサードパーティ製 PropTypes の作者で、利用者に既存の React PropTypes をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は見かけるようになるでしょう。 +これは手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret`](https://github.com/facebook/react/pull/7132)を React が確認できないために起こります。 以下に修正方法を示します。 例として使用しているのは [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。 現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。 - ```javascript export default function deprecated(propType, explanation) { return function validate(props, propName, componentName) { @@ -107,8 +82,6 @@ export default function deprecated(propType, explanation) { } ``` -In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation: - 誤検知を修正するには、**すべての**引数をラップされたPropTypeに渡してください。これはES6の `...rest` 記法で簡単に行えます。 ```javascript @@ -127,6 +100,4 @@ export default function deprecated(propType, explanation) { } ``` -This will silence the warning. - これで警告は出力されなくなります。 diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index e2bf149fc..13ff46b1b 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -3,15 +3,8 @@ title: Invalid ARIA Prop Warning layout: single permalink: warnings/invalid-aria-prop.html --- +「無効なARIA Props」の警告（invalid-aria-prop）は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 -The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties). +1. 使用した props が標準仕様に準拠しているはずのものであるなら、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 -「無効なARIA Props」の警告（invalid-aria-prop）は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 - -1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled. - -1. 有効であるはずの props を使用している場合は、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 - -2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered - -2. 指定した属性を React がまだ認識できない場合。React の将来のバージョンで修正される可能性は高いでしょう。とはいえ、React は現時点では未知の属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 +2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index 79bf09343..f2108f157 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -5,9 +5,7 @@ permalink: warnings/legacy-factories.html --- React Element ファクトリと JSX についての警告。 -You probably came here because your code is calling your component as a plain function call. This is now deprecated: - -このページに来たのは、恐らくコードがコンポーネントの呼び出しを普通の関数呼び出ししているからでしょう。これは現在非推奨になっています。 +このページを閲覧しているのは、恐らくコンポーネントを普通の関数として呼び出ししているからでしょう。これは現在非推奨になっています。 ```javascript var MyComponent = require('MyComponent'); @@ -19,8 +17,6 @@ function render() { ## JSX -React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html). - Reactコンポーネントは、このように直接呼び出すことはできなくなりました。代わりに[JSXを使うことができます](/docs/jsx-in-depth.html)。 ```javascript @@ -32,11 +28,8 @@ function render() { } ``` -## Without JSX ## JSX を使用しない場合 -If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it: - JSX を使いたくない、または使えない場合、コンポーネントを呼び出す前にファクトリでラップする必要があります。 ```javascript @@ -48,19 +41,11 @@ function render() { } ``` -This is an easy upgrade path if you have a lot of existing function calls. - 呼び出しの箇所が大量である場合、この修正方法が簡単です。 -## Dynamic components without JSX - ## JSX を使用しない動的なコンポーネント -If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline: - - -コンポーネントのクラスを動的に取得する場合は、すぐに実行してしまうファクトリを作成する必要はありません。その代わりにインラインで単に要素を作成します。 - +コンポーネントのクラスが動的に与えられる場合は、すぐに実行してしまうファクトリを作成する必要はありません。その代わりにインラインで単に要素を作成します。 ```javascript var React = require('react'); @@ -70,11 +55,6 @@ function render(MyComponent) { } ``` -## In Depth ## 詳細 - -[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) - -[この変更を行った理由について更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) - +[この変更がなされた理由について更に読む。](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index c2d90228b..a4a13a659 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -3,68 +3,52 @@ title: Refs Must Have Owner Warning layout: single permalink: warnings/refs-must-have-owner.html --- -refには所有者が必要であることについての警告。 +「refにはオーナーが必要である」の警告。 -You are probably here because you got one of the following error messages: - -このページに来たのは恐らく以下のエラーメッセージの1つが出力されたからでしょう： +このページを閲覧しているのは恐らく以下のエラーメッセージの1つが出力されたからでしょう。 *React 16.0.0+* > 警告: > > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). > -> ref 要素が文字列（myRefName）として指定されましたが、所有者が設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。 +> ref 要素が文字列（myRefName）として指定されましたが、オーナーが設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。 -*早期バージョンの React* +*より古いバージョンの React* > Warning: > > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded. > -> ReactOwner だけが ref を持つことができます。componentの render メソッド内で作成されていないコンポーネントに ref を追加したか、React のコピーを複数ロードしているかもしれません。 +> addComponentAsRefTo(...): ReactOwner だけが ref を持つことができます。コンポーネントの `render` メソッド内で作成されていないコンポーネントに ref を指定したか、React のコピーを複数ロードしているかもしれません。 これは通常、以下の3つのいずれかを意味します： -- You are trying to add a `ref` to a function component. -- You are trying to add a `ref` to an element that is being created outside of a component's render() function. -- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency) - -- `ref` を関数コンポーネントに追加しようとしている -- コンポーネントの render() 関数の外部で作成されている要素に `ref` を追加しようとしている -- Reactの複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによる）。 - -## Refs on Function Components -## 関数コンポーネントのRefs +- `ref` を関数コンポーネントに使用しようとしている +- コンポーネントの render() 関数の外部で作成されている要素に `ref` を使用しようとしている +- Reactの複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによって） -If `` is a function component, you can't add a ref to it: +## 関数コンポーネントのRef -``が関数コンポーネントである場合には、refを追加することはできません。 +``が関数コンポーネントである場合には、refを指定することはできません。 ```js // Doesn't work if Foo is a function! ``` -If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs). +コンポーネントに ref を指定する必要がある場合は、クラスコンポーネントに変換するか、あるいは ref を使わない方法を検討してください。[ref が本当に必要](/docs/refs-and-the-dom.html#when-to-use-refs)になることは滅多にありません。 -コンポーネントに ref を追加する必要がある場合は、クラスコンポーネントに変換するか、あるいは ref を使わない方法を検討してください。[ref が本当に必要](/docs/refs-and-the-dom.html#when-to-use-refs)になることは滅多にありません。 - -## Strings Refs Outside the Render Method ## render メソッド外での文字列 ref の使用 -This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work: - -これは通常、所有者を持たない（つまり、他のコンポーネントの render メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。 -例えば、以下はうまく動作しません： +これは通常、オーナーを持たない（つまり、他のコンポーネントの `render` メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。 +例えば、以下はうまく動作しません。 ```js // Doesn't work! ReactDOM.render(, el); ``` -Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref: - -ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。 +この ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。あるいは、コールバック ref を使えるかもしれません。 ```js @@ -77,20 +61,13 @@ ReactDOM.render( ); ``` -Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach. - -このようなアプローチにする前に、本当に ref が必要かどうか考慮してください。 +このようなアプローチを採用する前に、[本当に ref が必要かどうか](/docs/refs-and-the-dom.html#when-to-use-refs)を検討してください。 -## Multiple copies of React ## React の複数のコピー -Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems. - Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。 -ref に対して（突飛なことを）何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。 -時に、サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーが問題を引き起こす可能性があります。 - -If you are using npm... `npm ls` or `npm ls react` might help illuminate. +ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。 +時々、サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーが問題を引き起こす可能性があります。 npmを使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 3cb1cb317..bd1a6dafb 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -3,13 +3,8 @@ title: Special Props Warning layout: single permalink: warnings/special-props.html --- -特別なpropsの警告。 +「特別な props」の警告。 -Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component. +JSX要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない2つの特別な props（`ref` と `key`）があります。 -JSX要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない2つの特別な小道具（`ref` と `key`）があります。 - - -For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: ``). While this may seem redundant, it's important to separate app logic from reconciling hints. - -たとえばコンポーネントから(render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から） `this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値にアクセスする必要がある場合は、別の prop で渡します（例： ``）。これは冗長に思えるかもしれませんが、アプリケーションロジックと突き合わせ処理(reconciling)のためのヒントを分けることは重要です。 +たとえばコンポーネントから（render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から）`this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値が必要ならば、別の prop で渡します（例： ``）。これは冗長に思えるかもしれませんが、アプリケーションのロジックと突き合わせ処理（reconciling）のためのヒントを分けることは重要です。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 50f0649f5..fb3cb71a0 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,44 +3,24 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- -不明なプロパティの警告。 - -The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around. - -unknown-prop 警告は、DOM 標準仕様で定義された属性/プロパティであるとReactが認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 +「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであるとReactが認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 -There are a couple of likely reasons this warning could be appearing: - -この警告が出現しそうな理由がいくつかあります： - -1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. [transferring props](/docs/transferring-props.html)). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component. - -1. `{...this.props}` または `cloneElement(element, this.props)` を使っていませんか？ -あなたのコンポーネントは自身の props を子要素にそのまま転送しています。(例 [propsの転送](/docs/transferring-props.html))。子要素に props を転送する場合、親コンポーネントが解釈すべき props を誤って子に転送していないことを確認する必要があります。 - +この警告が表示されるありそうな原因のいくつかを示します。 -2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes). +1. `{...this.props}` または `cloneElement(element, this.props)` を使っていませんか？　コンポーネントが自身の props を子要素にそのまま転送しています（参考： [propsの転送](/docs/transferring-props.html)）。子要素に props を転送する場合、親コンポーネントが解釈すべき props を誤って子に転送していないことを確認する必要があります。 -2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。標準の DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性(data-*)の使用を検討してください。 +2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性（data-*）の使用を検討してください。 -3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered. +2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 -2. 指定した属性を React がまだ認識できない場合。React の将来のバージョンで修正される可能性は高いでしょう。とはいえ、React は現時点では未知の属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 - -4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). - -4. 大文字を使わずに React コンポーネントを使おうとしている場合。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。 +4. 大文字で始まらない名前の React コンポーネントを使おうとしている場合。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。 --- -To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example: - -これを修正するためには、コンポーネントを組合わせるコンポーネントは、自分自身のコンポーネントのためのものであり、子コンポーネントのためのものではないすべての props を「消費」する必要があります。例えば、 +この警告を修正するには、他のコンポーネントを組合わせるコンポーネントは、子のコンポーネントのためのものではない、自分自身のコンポーネントのための全ての props を「消費」する必要があります。例えば、 -**Bad:** Unexpected `layout` prop is forwarded to the `div` tag. - -**悪い例：** 予期せず layout プロパティが div タグに転送されています。 +**悪い例：** 期待されていない layout プロパティが div タグに転送されています。 ```js function MyDiv(props) { @@ -54,8 +34,6 @@ function MyDiv(props) { } ``` -**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable. - **良い例：** スプレッド演算子は props から必要な変数だけ取り出して、残りの props を別の変数に入れるのに使用できます。 @@ -70,8 +48,6 @@ function MyDiv(props) { } ``` -**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable. - **良い例：** props を新しいオブジェクトに割り当てて(`Object.assign`)、使用しているキーを新しいオブジェクトから削除することもできます。ただし、元の `this.props` オブジェクトは不変オブジェクトとみなされるべきなので、そこから props を削除しないようにしてください。 From 96c11d80b9b4ff1f02ce5b2f8e8679125369484a Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Sun, 3 Feb 2019 10:58:47 +0900 Subject: [PATCH 04/15] check guidline (add spaces). --- content/warnings/dont-call-proptypes.md | 18 +++++++++--------- content/warnings/invalid-aria-prop.md | 2 +- content/warnings/legacy-factories.md | 2 +- content/warnings/refs-must-have-owner.md | 8 ++++---- content/warnings/special-props.md | 4 ++-- content/warnings/unknown-prop.md | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index bed580988..20de8eb6f 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -8,13 +8,13 @@ permalink: warnings/dont-call-proptypes.html > 注意： > > React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。 -> コードを自動で変換するための [codemodスクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 +> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 -Reactの将来のメジャーリリースでは、PropTypeのバリデーションを実装するコードは、プロダクションビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（プロダクションビルドで削除されないもの）はエラーを投げることになります。 +React の将来のメジャーリリースでは、PropType のバリデーションを実装するコードは、本番用ビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（本番用ビルドで削除されないもの）はエラーを投げることになります。 ### PropTypes 宣言については問題ありません -PropTypeの通常の使用は引き続きサポートされます。 +PropType の通常の使用は引き続きサポートされます。 ```javascript Button.propTypes = { @@ -26,7 +26,7 @@ Button.propTypes = { ### PropTypes を直接呼び出さない -React コンポーネントに注釈を付ける以外の方法でPropTypeを使用することはサポートされなくなりました。 +React コンポーネントに注釈を付ける以外の方法で PropType を使用することはサポートされなくなりました。 ```javascript var apiShape = PropTypes.shape({ @@ -38,13 +38,13 @@ var apiShape = PropTypes.shape({ var error = apiShape(json, 'response'); ``` -この形で PropType を使用をする必要がある場合、PropTypeのフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをお勧めします。 +この形で PropType を使用をする必要がある場合、PropType のフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをお勧めします。 -警告に応じてコードを修正しなければ、このコードは React 16 のプロダクションビルドではクラッシュします。 +警告に応じてコードを修正しなければ、このコードは React 16 の本番用ビルドではクラッシュします。 ### PropTypes を直接呼んでいないのに警告が発生するとき -警告で出力されているスタックトレースを調べることで、PropTypesを直接呼んでいるコンポーネント定義を見付けることができます。ほとんどの場合、ReactのPropTypeをラップするサードパーティ製のPropTypeが問題の原因です。たとえば、 +警告で出力されているスタックトレースを調べることで、PropTypes を直接呼んでいるコンポーネント定義を見付けることができます。ほとんどの場合、React の PropType をラップするサードパーティ製の PropType が問題の原因です。たとえば、 ```js Button.propTypes = { @@ -55,7 +55,7 @@ Button.propTypes = { } ``` -このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため、誤検出（=呼び出していないのに呼び出したと判定）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装する際に、この問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについてissueを作成することもできます。 +このケースでは、 `ThirdPartyPropTypes.deprecated` が `PropTypes.bool` を呼び出しているラッパーです。このパターンそのものは良いのですが、あなたが直接 PropTypes を呼び出したと React が判断するため、誤検出（=呼び出していないのに呼び出したと判定）を引き起こします。次節では `ThirdPartyPropTypes` のようなライブラリを実装する際に、この問題をどのように解決するかについて述べます。自分で書いたライブラリでなければ、そのライブラリについて issue を作成することもできます。 ### サードパーティの PropTypes における誤検知を修正する @@ -82,7 +82,7 @@ export default function deprecated(propType, explanation) { } ``` -誤検知を修正するには、**すべての**引数をラップされたPropTypeに渡してください。これはES6の `...rest` 記法で簡単に行えます。 +誤検知を修正するには、**すべての**引数をラップされた PropType に渡してください。これはES6の `...rest` 記法で簡単に行えます。 ```javascript export default function deprecated(propType, explanation) { diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index 13ff46b1b..b93d6db75 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -3,7 +3,7 @@ title: Invalid ARIA Prop Warning layout: single permalink: warnings/invalid-aria-prop.html --- -「無効なARIA Props」の警告（invalid-aria-prop）は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 +「無効なARIA Props」警告 (invalid-aria-prop) は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 1. 使用した props が標準仕様に準拠しているはずのものであるなら、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index f2108f157..f419ffe84 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -17,7 +17,7 @@ function render() { ## JSX -Reactコンポーネントは、このように直接呼び出すことはできなくなりました。代わりに[JSXを使うことができます](/docs/jsx-in-depth.html)。 +React コンポーネントは、このように直接呼び出すことはできなくなりました。代わりに [JSX を使うことができます](/docs/jsx-in-depth.html)。 ```javascript var React = require('react'); diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index a4a13a659..06247002a 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -12,7 +12,7 @@ permalink: warnings/refs-must-have-owner.html > > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). > -> ref 要素が文字列（myRefName）として指定されましたが、オーナーが設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。 +> ref 要素が文字列 (myRefName) として指定されましたが、オーナーが設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。（詳細： https://fb.me/react-refs-must-have-owner ）。 *より古いバージョンの React* > Warning: @@ -25,11 +25,11 @@ permalink: warnings/refs-must-have-owner.html - `ref` を関数コンポーネントに使用しようとしている - コンポーネントの render() 関数の外部で作成されている要素に `ref` を使用しようとしている -- Reactの複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによって） +- React の複数の（競合する）コピーがロードされている（例えばnpm依存関係の設定ミスによって） ## 関数コンポーネントのRef -``が関数コンポーネントである場合には、refを指定することはできません。 +`` が関数コンポーネントである場合には、ref を指定することはできません。 ```js // Doesn't work if Foo is a function! @@ -70,4 +70,4 @@ Bower は依存関係の重複を上手く排除しますが、npm はそうで ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。 時々、サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーが問題を引き起こす可能性があります。 -npmを使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 +npm を使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index bd1a6dafb..5be4170fb 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -5,6 +5,6 @@ permalink: warnings/special-props.html --- 「特別な props」の警告。 -JSX要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない2つの特別な props（`ref` と `key`）があります。 +JSX 要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない 2 つの特別な props（`ref` と `key`）があります。 -たとえばコンポーネントから（render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から）`this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値が必要ならば、別の prop で渡します（例： ``）。これは冗長に思えるかもしれませんが、アプリケーションのロジックと突き合わせ処理（reconciling）のためのヒントを分けることは重要です。 +たとえばコンポーネントから（render()関数または[propType](/docs/typechecking-with-proptypes.html#proptypes)から）`this.props.key` へアクセスしようとすると未定義となります。子コンポーネント内でその値が必要ならば、別の props で渡します（例： ``）。これは冗長に思えるかもしれませんが、アプリケーションのロジックと突き合わせ処理（reconciling）のためのヒントを分けることは重要です。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index fb3cb71a0..cd93ddbcd 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,14 +3,14 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- -「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであるとReactが認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 +「不明なプロパティ」 (unknown-prop) 警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 この警告が表示されるありそうな原因のいくつかを示します。 1. `{...this.props}` または `cloneElement(element, this.props)` を使っていませんか？　コンポーネントが自身の props を子要素にそのまま転送しています（参考： [propsの転送](/docs/transferring-props.html)）。子要素に props を転送する場合、親コンポーネントが解釈すべき props を誤って子に転送していないことを確認する必要があります。 -2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性（data-*）の使用を検討してください。 +2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性 (data-*) の使用を検討してください。 2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 From 3bb747ca2f2ac9301536ae891314576d8e0ab12f Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Sun, 3 Feb 2019 14:24:29 +0900 Subject: [PATCH 05/15] fix errors that was textlint complains about spaces --- content/warnings/unknown-prop.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index cd93ddbcd..16005e2d2 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,7 +3,7 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- -「不明なプロパティ」 (unknown-prop) 警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 +「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 この警告が表示されるありそうな原因のいくつかを示します。 @@ -48,7 +48,7 @@ function MyDiv(props) { } ``` -**良い例：** props を新しいオブジェクトに割り当てて(`Object.assign`)、使用しているキーを新しいオブジェクトから削除することもできます。ただし、元の `this.props` オブジェクトは不変オブジェクトとみなされるべきなので、そこから props を削除しないようにしてください。 +**良い例：** props を新しいオブジェクトに割り当てて（`Object.assign`）、使用しているキーを新しいオブジェクトから削除することもできます。ただし、元の `this.props` オブジェクトは不変オブジェクトとみなされるべきなので、そこから props を削除しないようにしてください。 ```js From 0cc5c85abc4488ef9a12876cd2fe33d7a021d137 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 06:01:38 +0900 Subject: [PATCH 06/15] changes about spaces --- content/warnings/dont-call-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 20de8eb6f..d12445be7 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -82,7 +82,7 @@ export default function deprecated(propType, explanation) { } ``` -誤検知を修正するには、**すべての**引数をラップされた PropType に渡してください。これはES6の `...rest` 記法で簡単に行えます。 +誤検知を修正するには、**すべての**引数をラップされた PropType に渡してください。これは ES6 の `...rest` 記法で簡単に行えます。 ```javascript export default function deprecated(propType, explanation) { From 9ef806a344f6fae26cbe03472fb4ac91d629a1eb Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 06:27:13 +0900 Subject: [PATCH 07/15] Update content/warnings/dont-call-proptypes.md Co-Authored-By: uehaj <59012+uehaj@users.noreply.github.com> --- content/warnings/dont-call-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 20de8eb6f..3e992c391 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -38,7 +38,7 @@ var apiShape = PropTypes.shape({ var error = apiShape(json, 'response'); ``` -この形で PropType を使用をする必要がある場合、PropType のフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをお勧めします。 +この形で PropType を使用をする必要がある場合、PropType のフォーク版（[これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど）を使用するか、あるいは新たにフォーク版を作成することをおすすめします。 警告に応じてコードを修正しなければ、このコードは React 16 の本番用ビルドではクラッシュします。 From d691fb5115ec29a670925ce18871febe6d1b985a Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 06:33:15 +0900 Subject: [PATCH 08/15] Update content/warnings/legacy-factories.md commented at review Co-Authored-By: uehaj <59012+uehaj@users.noreply.github.com> --- content/warnings/legacy-factories.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index f419ffe84..8700ecbdc 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -17,7 +17,7 @@ function render() { ## JSX -React コンポーネントは、このように直接呼び出すことはできなくなりました。代わりに [JSX を使うことができます](/docs/jsx-in-depth.html)。 +React コンポーネントは、このように直接呼び出すことはできなくなりました。代わりに [JSX を使用できます](/docs/jsx-in-depth.html)。 ```javascript var React = require('react'); From 046da59336c1b10529cda501268da5e2b5426245 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 06:38:28 +0900 Subject: [PATCH 09/15] Update content/warnings/unknown-prop.md commented at review Co-Authored-By: uehaj <59012+uehaj@users.noreply.github.com> --- content/warnings/unknown-prop.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 16005e2d2..258933e35 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -18,7 +18,7 @@ permalink: warnings/unknown-prop.html --- -この警告を修正するには、他のコンポーネントを組合わせるコンポーネントは、子のコンポーネントのためのものではない、自分自身のコンポーネントのための全ての props を「消費」する必要があります。例えば、 +この警告を修正するには、他のコンポーネントを組み合わせるコンポーネントは、子のコンポーネントのためのものではない、自分自身のコンポーネントのための全ての props を「消費」する必要があります。例えば、 **悪い例：** 期待されていない layout プロパティが div タグに転送されています。 From 9e8916d840fdfcf0376c60461c46c9590de04e40 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 06:41:34 +0900 Subject: [PATCH 10/15] updated reviewed points --- content/warnings/dont-call-proptypes.md | 2 +- content/warnings/refs-must-have-owner.md | 4 +--- content/warnings/unknown-prop.md | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index d12445be7..7f0a25348 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -7,7 +7,7 @@ permalink: warnings/dont-call-proptypes.html > 注意： > -> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。 +> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types) を使用してください。 > コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 React の将来のメジャーリリースでは、PropType のバリデーションを実装するコードは、本番用ビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（本番用ビルドで削除されないもの）はエラーを投げることになります。 diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index 06247002a..5ccc2f785 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -66,8 +66,6 @@ ReactDOM.render( ## React の複数のコピー -Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。 -ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。 -時々、サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーが問題を引き起こす可能性があります。 +Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーがたまに問題を引き起こす可能性があります。 npm を使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 16005e2d2..fbfbf8b97 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -14,7 +14,7 @@ permalink: warnings/unknown-prop.html 2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 -4. 大文字で始まらない名前の React コンポーネントを使おうとしている場合。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOMタグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。 +4. 大文字で始まらない名前の React コンポーネントを使おうとしている。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOM タグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。 --- From 22616477a292a810683159faf89f8c5db4a76f72 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Wed, 6 Feb 2019 09:04:20 +0900 Subject: [PATCH 11/15] updated reviewed point --- content/warnings/dont-call-proptypes.md | 4 ++-- content/warnings/unknown-prop.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 229c00504..e018fd740 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -7,8 +7,8 @@ permalink: warnings/dont-call-proptypes.html > 注意： > -> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-typesライブラリ](https://www.npmjs.com/package/prop-types) を使用してください。 -> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) も提供しています。 +> React.PropTypes は React v15.5 から別パッケージに移動しました。代わりに [prop-types ライブラリ](https://www.npmjs.com/package/prop-types)を使用してください。 +> コードを自動で変換するための [codemod スクリプト](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes)も提供しています。 React の将来のメジャーリリースでは、PropType のバリデーションを実装するコードは、本番用ビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード（本番用ビルドで削除されないもの）はエラーを投げることになります。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index ed73f5026..c6b968dcf 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,7 +3,7 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- -「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティでDOM をレンダリングしようとした場合に発生します。 +「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティで DOM をレンダリングしようとした場合に発生します。 該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 この警告が表示されるありそうな原因のいくつかを示します。 From e2fab8c045473a19303141096bfe19882bca621a Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Thu, 14 Feb 2019 06:45:45 +0900 Subject: [PATCH 12/15] Update content/warnings/dont-call-proptypes.md Co-Authored-By: uehaj <59012+uehaj@users.noreply.github.com> --- content/warnings/dont-call-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index e018fd740..725566f68 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -59,7 +59,7 @@ Button.propTypes = { ### サードパーティの PropTypes における誤検知を修正する -あなたがサードパーティ製 PropTypes の作者で、利用者に既存の React PropTypes をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は見かけるようになるでしょう。 +あなたがサードパーティ製 PropTypes の作者で、利用者に既存の React PropTypes をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は目にするようになるでしょう。 これは手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret`](https://github.com/facebook/react/pull/7132)を React が確認できないために起こります。 以下に修正方法を示します。 From d0238030a9432baec142129eeb552c655d429a8e Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Thu, 14 Feb 2019 06:46:29 +0900 Subject: [PATCH 13/15] Update content/warnings/invalid-aria-prop.md Co-Authored-By: uehaj <59012+uehaj@users.noreply.github.com> --- content/warnings/invalid-aria-prop.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index b93d6db75..ec4152bd8 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -3,7 +3,8 @@ title: Invalid ARIA Prop Warning layout: single permalink: warnings/invalid-aria-prop.html --- -「無効なARIA Props」警告 (invalid-aria-prop) は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 + +「無効な ARIA Props」警告 (invalid-aria-prop) は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 1. 使用した props が標準仕様に準拠しているはずのものであるなら、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 From 13a5f74811641605a55045a18e6e3efa1ac6d2f8 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Thu, 14 Feb 2019 06:50:22 +0900 Subject: [PATCH 14/15] updated review commented --- content/warnings/dont-call-proptypes.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index e018fd740..46c5391ba 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -62,9 +62,7 @@ Button.propTypes = { あなたがサードパーティ製 PropTypes の作者で、利用者に既存の React PropTypes をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は見かけるようになるでしょう。 これは手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret`](https://github.com/facebook/react/pull/7132)を React が確認できないために起こります。 -以下に修正方法を示します。 -例として使用しているのは [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。 -現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。 +以下に修正方法を示します。例として使用しているのは [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。 ```javascript export default function deprecated(propType, explanation) { From 7ad7ffe82cbcfe4617f9bc8807949503ec520169 Mon Sep 17 00:00:00 2001 From: "UEHARA, Junji" <59012+uehaj@users.noreply.github.com> Date: Thu, 14 Feb 2019 09:58:05 +0900 Subject: [PATCH 15/15] updated with review commented points --- content/warnings/invalid-aria-prop.md | 1 - content/warnings/refs-must-have-owner.md | 5 +---- content/warnings/unknown-prop.md | 5 ++--- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md index ec4152bd8..44390a252 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -3,7 +3,6 @@ title: Invalid ARIA Prop Warning layout: single permalink: warnings/invalid-aria-prop.html --- - 「無効な ARIA Props」警告 (invalid-aria-prop) は、Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) の[標準仕様](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)に無い aria-* プロパティで DOM 要素をレンダリングしようとした場合に発生します。 1. 使用した props が標準仕様に準拠しているはずのものであるなら、綴りをよく確認してください。 `aria-labelledby` や `aria-activedescendant` の綴り間違いはありがちです。 diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index 5ccc2f785..491451824 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -40,8 +40,7 @@ permalink: warnings/refs-must-have-owner.html ## render メソッド外での文字列 ref の使用 -これは通常、オーナーを持たない（つまり、他のコンポーネントの `render` メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。 -例えば、以下はうまく動作しません。 +これは通常、オーナーを持たない（つまり、他のコンポーネントの `render` メソッド内で作成されなかった）コンポーネントへ ref を追加しようとしているということです。例えば、以下はうまく動作しません。 ```js // Doesn't work! @@ -50,7 +49,6 @@ ReactDOM.render(, el); この ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。あるいは、コールバック ref を使えるかもしれません。 - ```js let app; ReactDOM.render( @@ -63,7 +61,6 @@ ReactDOM.render( このようなアプローチを採用する前に、[本当に ref が必要かどうか](/docs/refs-and-the-dom.html#when-to-use-refs)を検討してください。 - ## React の複数のコピー Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーがたまに問題を引き起こす可能性があります。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index c6b968dcf..52d5cc77a 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,8 +3,7 @@ title: Unknown Prop Warning layout: single permalink: warnings/unknown-prop.html --- -「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティで DOM をレンダリングしようとした場合に発生します。 -該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。 +「不明なプロパティ」（unknown-prop）警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティで DOM をレンダリングしようとした場合に発生します。該当箇所の近辺で非標準の props を使ってしまっていないことを確認してください。 この警告が表示されるありそうな原因のいくつかを示します。 @@ -12,7 +11,7 @@ permalink: warnings/unknown-prop.html 2. 独自データを表現するため等の理由で、ネイティブの DOM ノード上で非標準の DOM 属性を使用している場合。DOM 要素に独自形式のデータを追加しようとしているなら、[MDN で説明されている](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)通りにカスタムデータ属性 (data-*) の使用を検討してください。 -2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 +3. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 4. 大文字で始まらない名前の React コンポーネントを使おうとしている。React では [JSX の変換の際、ユーザ定義のコンポーネントと DOM タグとを区別するのに大文字と小文字との区別を用いる](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)ため、小文字のタグは DOM タグとして解釈されてしまいます。