Skip to content

Commit

Permalink
updated with review commented points
Browse files Browse the repository at this point in the history
  • Loading branch information
uehaj committed Feb 14, 2019
1 parent 1e554ac commit 7ad7ffe
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 8 deletions.
1 change: 0 additions & 1 deletion content/warnings/invalid-aria-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` の綴り間違いはありがちです。
Expand Down
5 changes: 1 addition & 4 deletions content/warnings/refs-must-have-owner.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@ permalink: warnings/refs-must-have-owner.html

## render メソッド外での文字列 ref の使用

これは通常、オーナーを持たない(つまり、他のコンポーネントの `render` メソッド内で作成されなかった)コンポーネントへ ref を追加しようとしているということです。
例えば、以下はうまく動作しません。
これは通常、オーナーを持たない(つまり、他のコンポーネントの `render` メソッド内で作成されなかった)コンポーネントへ ref を追加しようとしているということです。例えば、以下はうまく動作しません。

```js
// Doesn't work!
Expand All @@ -50,7 +49,6 @@ ReactDOM.render(<App ref="app" />, el);

この ref を保持する新しいトップレベルのコンポーネントの中で当該のコンポーネントをレンダリングしてみてください。あるいは、コールバック ref を使えるかもしれません。


```js
let app;
ReactDOM.render(
Expand All @@ -63,7 +61,6 @@ ReactDOM.render(

このようなアプローチを採用する前に、[本当に ref が必要かどうか](/docs/refs-and-the-dom.html#when-to-use-refs)を検討してください。


## React の複数のコピー

Bower は依存関係の重複を上手く排除しますが、npm はそうではありません。ref に対して特別なことを何もしていないなら、原因は ref ではなく、複数の React のコピーがプロジェクトにロードされているからである可能性が高いでしょう。サードパーティ製のモジュールを npm 経由で追加した場合、依存ライブラリの重複したコピーがたまに問題を引き起こす可能性があります。
Expand Down
5 changes: 2 additions & 3 deletions content/warnings/unknown-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ title: Unknown Prop Warning
layout: single
permalink: warnings/unknown-prop.html
---
「不明なプロパティ」(unknown-prop)警告は、DOM 標準仕様で定義された属性/プロパティであると React が認識していないプロパティで DOM をレンダリングしようとした場合に発生します。
該当箇所の近辺で非正規な props を使ってしまっていないことを確認してください。
「不明なプロパティ」(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. 指定した属性を 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 タグとして解釈されてしまいます。

Expand Down

0 comments on commit 7ad7ffe

Please sign in to comment.