From 9de3da2f45bd260ffc643e04a6308134f69f3088 Mon Sep 17 00:00:00 2001 From: kn3ny Date: Fri, 1 Feb 2019 17:16:37 +0900 Subject: [PATCH 01/12] Import from crowdin --- content/docs/reference-dom-elements.md | 52 +++++++++++++------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index ef1b73555..7ca4bd60a 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -1,6 +1,6 @@ --- id: dom-elements -title: DOM Elements +title: DOM 要素 layout: docs category: Reference permalink: docs/dom-elements.html @@ -14,27 +14,27 @@ redirect_from: - "tips/dangerously-set-inner-html.html" --- -React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations. +React はパフォーマンスとブラウザ間の互換性を確保するためにブラウザから独立した DOM システムを実装しています。そしてこれを機にして、ブラウザの DOM 実装に存在するいくつかの粗削りな部分を取り払っています。 -In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`. +React では、全ての DOM のプロパティと属性（イベントハンドラも含む）はキャメルケースで名前付けされる必要があります。例えば、HTML 属性 `tabindex` に React で対応する属性は `tabIndex` です。例外は `aria-*` と `data-*` 属性であり、これらは小文字に揃える必要があります。例えば、`aria-label` は `aria-label` のままにできます。 -## Differences In Attributes +## 属性についての差異 -There are a number of attributes that work differently between React and HTML: +React と HTML とで挙動が異なる属性がいくつか存在します。 ### checked -The `checked` attribute is supported by `` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted. +`checked` 属性は `checkbox` または `radio` 型の `` コンポーネントでサポートされています。この属性はコンポーネントがチェックされているかを設定します。制御されたコンポーネントを構築する際に便利です。`defaultChecked` は非制御 (uncontrolled) コンポーネントにおける等価な属性で、最初にマウントされた時にチェックされるかを設定します。 ### className -To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `
`, ``, and others. +CSS クラスを指定する際は、`className` 属性を使用してください。これは `
` 、`` およびその他あらゆる標準 DOM 要素と SVG 要素に対して適用されます。 -If you use React with Web Components (which is uncommon), use the `class` attribute instead. +React を（一般的ではありませんが）Web Componentsと使用する場合、代わりに class 属性を使用してください。 ### dangerouslySetInnerHTML -`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example: +`dangerouslySetInnerHTML` は React において、ブラウザ DOM における `innerHTML` を代替するものです。一般に、コードで HTML を設定することは、ユーザを[クロスサイトスクリプティング (XSS) ](https://en.wikipedia.org/wiki/Cross-site_scripting)攻撃にうっかり晒してしまいやすいので、危険です。そのため、 React で直接 HTML を設定することはできますが、`dangerouslySetInnerHTML` と入力して `__html` というキーを持つオブジェクトを渡すことで、この行為が危険であるということを自身に思い出させる必要があります。例えば： ```js function createMarkup() { @@ -48,23 +48,23 @@ function MyComponent() { ### htmlFor -Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead. +`for` は JavaScript では予約語なので、 React 要素は代わりに `htmlFor` を使用します。 ### onChange -The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time. +`onChange` イベントは期待通りの振る舞いをするようになっています。フォームフィールドに変更があるたび、このイベントが発生します。`onChange` という名前はその振る舞いにふさわしいものではなく、React はユーザーからの入力のリアルタイムな処理をこのイベントに依存しているため、既存のブラウザの振る舞いはあえて使用していません。 ### selected -The `selected` attribute is supported by `
``` -Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). +全てのスタイルプロパティがピクセルの文字列に変換されるわけではありません。特定のものは単位がないままです（例えば `zoom`、 `order`、 `flex`）。単位のないプロパティの完全なリストは[こちら](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59)で確認できます。 ### suppressContentEditableWarning -Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually. +通常、子要素を持つ要素が `contentEditable` でもある場合、その設定は動作しないので警告が出力されます。この属性はその警告が出力されないようにします。`contentEditable` を自身で管理する [Draft.js](https://facebook.github.io/draft-js/) のようなライブラリを構築するときでも無い限り、この属性は使用しないでください。 ### suppressHydrationWarning @@ -120,13 +120,13 @@ If you set `suppressHydrationWarning` to `true`, React will not warn you about m ### value -The `value` attribute is supported by `` and `