diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md index 7eba37090..10cedf775 100644 --- a/content/warnings/dont-call-proptypes.md +++ b/content/warnings/dont-call-proptypes.md @@ -3,18 +3,18 @@ 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). -> ->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion. +> 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 のバリデーションを実装するコードは、本番用ビルドから削除される予定です。その際には、バリデーションを手動で呼び出す全てのコード(本番用ビルドで削除されないもの)はエラーを投げることになります。 -### Declaring PropTypes is still fine +### PropTypes 宣言については問題ありません -The normal usage of PropTypes is still supported: +PropType の通常の使用は引き続きサポートされます。 ```javascript Button.propTypes = { @@ -22,11 +22,11 @@ Button.propTypes = { }; ``` -Nothing changes here. +これについては何も変わっていません。 -### Don’t call PropTypes directly +### PropTypes を直接呼び出さない -Using PropTypes in any other way than annotating React components with them is no longer supported: +React コンポーネントに注釈を付ける以外の方法で PropType を使用することはサポートされなくなりました。 ```javascript var apiShape = PropTypes.shape({ @@ -38,13 +38,13 @@ var apiShape = PropTypes.shape({ var error = apiShape(json, 'response'); ``` -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). +この形で PropType を使用をする必要がある場合、PropType のフォーク版([これら](https://github.com/aackerman/PropTypes) [2つの](https://github.com/developit/proptypes)パッケージなど)を使用するか、あるいは新たにフォーク版を作成することをおすすめします。 -If you don't fix the warning, this code will crash in production with React 16. +警告に応じてコードを修正しなければ、このコードは React 16 の本番用ビルドではクラッシュします。 -### If you don't call PropTypes directly but still get the warning +### PropTypes を直接呼んでいないのに警告が発生するとき -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 = { @@ -55,13 +55,14 @@ 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 +### サードパーティの 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 をラップさせる場合、ライブラリがこの警告を発生させるのを利用者は目にするようになるでしょう。 +これは手動によるPropTypesの呼び出しを[検知するために渡す最後尾の引数 `secret`](https://github.com/facebook/react/pull/7132)を React が確認できないために起こります。 -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](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) にある `deprecated` です。現時点での実装では単に引数として `props`、 `propName`、そして `componentName` を渡しているだけです。 ```javascript export default function deprecated(propType, explanation) { @@ -79,7 +80,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` 記法で簡単に行えます。 ```javascript export default function deprecated(propType, explanation) { @@ -97,4 +98,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 53ebdd9bc..44390a252 100644 --- a/content/warnings/invalid-aria-prop.md +++ b/content/warnings/invalid-aria-prop.md @@ -3,9 +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` の綴り間違いはありがちです。 -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 +2. 指定した属性を React が標準仕様の一部として正しく認識していない場合。この振舞いはReact の将来のバージョンで修正される可能性は高いでしょう。しかし現時点では、React は知らない属性を全て削除するため、React アプリケーションで指定してもレンダリングされません。 diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md index e26fed9de..8700ecbdc 100644 --- a/content/warnings/legacy-factories.md +++ b/content/warnings/legacy-factories.md @@ -3,8 +3,9 @@ title: React Element Factories and JSX Warning layout: single 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'); @@ -16,7 +17,7 @@ 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 var React = require('react'); @@ -27,9 +28,9 @@ 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'); @@ -40,11 +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'); @@ -54,6 +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) diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md index e95dff489..491451824 100644 --- a/content/warnings/refs-must-have-owner.md +++ b/content/warnings/refs-must-have-owner.md @@ -3,46 +3,51 @@ 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). +> +> ref 要素が文字列 (myRefName) として指定されましたが、オーナーが設定されていませんでした。Reactの複数のコピーがロードされている可能性があります。(詳細: https://fb.me/react-refs-must-have-owner )。 -*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. +> +> addComponentAsRefTo(...): ReactOwner だけが ref を持つことができます。コンポーネントの `render` メソッド内で作成されていないコンポーネントに ref を指定したか、React のコピーを複数ロードしているかもしれません。 -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) +- `ref` を関数コンポーネントに使用しようとしている +- コンポーネントの render() 関数の外部で作成されている要素に `ref` を使用しようとしている +- React の複数の(競合する)コピーがロードされている(例えばnpm依存関係の設定ミスによって) -## Refs on Function Components +## 関数コンポーネントのRef -If `` is a function component, you can't add a ref to it: +`` が関数コンポーネントである場合には、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)になることは滅多にありません。 -## 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 を追加しようとしているということです。例えば、以下はうまく動作しません。 ```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 を使えるかもしれません。 ```js let app; @@ -54,10 +59,10 @@ ReactDOM.render( ); ``` -Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach. +このようなアプローチを採用する前に、[本当に 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. +npm を使用している場合、`npm ls` や `npm ls react` の実行が、問題の原因を探す役に立つかもしれません。 diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md index 32857abf2..5be4170fb 100644 --- a/content/warnings/special-props.md +++ b/content/warnings/special-props.md @@ -3,7 +3,8 @@ title: Special Props Warning 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 要素の大部分の props はコンポーネントに渡されますが、React が使用するため、コンポーネントに転送されない 2 つの特別な props(`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` へアクセスしようとすると未定義となります。子コンポーネント内でその値が必要ならば、別の props で渡します(例: ``)。これは冗長に思えるかもしれませんが、アプリケーションのロジックと突き合わせ処理(reconciling)のためのヒントを分けることは重要です。 diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 783d1b385..52d5cc77a 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -3,23 +3,23 @@ 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 をレンダリングしようとした場合に発生します。該当箇所の近辺で非標準の 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). +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 アプリケーションで指定してもレンダリングされません。 -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 タグとして解釈されてしまいます。 --- -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 タグに転送されています。 ```js function MyDiv(props) { @@ -33,7 +33,8 @@ 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) { @@ -46,7 +47,8 @@ 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 を削除しないようにしてください。 + ```js function MyDiv(props) {