Skip to content

Translate "React DOM Components" index #682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 25, 2023
Merged

Translate "React DOM Components" index #682

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions src/content/reference/react-dom/components/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
---
title: "React DOM Components"
title: "React DOM コンポーネント"
---

<Intro>

React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
React は、ブラウザ組み込みのすべての [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) と [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) コンポーネントをサポートしています。

</Intro>

---

## Common components {/*common-components*/}
## 一般的なコンポーネント {/*common-components*/}

All of the built-in browser components support some props and events.
すべてのブラウザ組み込みコンポーネントは、いくつかの props とイベントをサポートしています。

* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)
* [`<div>` などの一般的なコンポーネント](/reference/react-dom/components/common)

This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
これには、`ref` や `dangerouslySetInnerHTML` のような React 固有の props も含みます。

---

## Form components {/*form-components*/}
## フォームコンポーネント {/*form-components*/}

These built-in browser components accept user input:
以下のブラウザ内蔵コンポーネントはユーザからの入力を受け付けます。

* [`<input>`](/reference/react-dom/components/input)
* [`<select>`](/reference/react-dom/components/select)
* [`<textarea>`](/reference/react-dom/components/textarea)

They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
これらは React では特別です。なぜなら props として `value` を渡すと[*制御されたコンポーネント*](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)になるからです。

---

## All HTML components {/*all-html-components*/}
## すべての HTML コンポーネント {/*all-html-components*/}

React supports all built-in browser HTML components. This includes:
React はブラウザ組み込みのすべての HTML コンポーネントをサポートしています。これには以下が含まれます。

* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
Expand Down Expand Up @@ -140,38 +140,38 @@ React supports all built-in browser HTML components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
[DOM 標準](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)と同様に、React では props の名前として `camelCase` 規則を使用します。例えば、`tabindex` ではなく `tabIndex` と書きます。既存の HTML を JSX に変換するための[オンラインコンバータ](https://transform.tools/html-to-jsx)を使用できます。

</Note>

---

### Custom HTML elements {/*custom-html-elements*/}
### カスタム HTML 要素 {/*custom-html-elements*/}

If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
ダッシュを含むタグ、例えば `<my-element>` をレンダーする場合、React は[カスタム HTML 要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)をレンダーしていると想定します。React では、カスタム要素のレンダーは、組み込みのブラウザタグのレンダーとは異なる方法で行われます。

- All custom element props are serialized to strings and are always set using attributes.
- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
- すべてのカスタム要素の props は文字列にシリアライズされ、常に属性を使用して設定されます。
- カスタム要素は `className` ではなく `class` を、`htmlFor` ではなく `for` を受け入れます。

If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
組み込みのブラウザ HTML 要素を [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) 属性を用いてレンダーする場合も、カスタム要素として扱われます。

<Note>

[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
[React の将来のバージョンでは、カスタム要素に対するより包括的なサポートが含まれます](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)。

You can try it by upgrading React packages to the most recent experimental version:
これは、最新の実験的 (experimental) バージョンに React パッケージをアップグレードすることで試すことができます。

- `react@experimental`
- `react-dom@experimental`

Experimental versions of React may contain bugs. Don't use them in production.
React の実験的バージョンにはバグが含まれている可能性があります。本番環境では使用しないでください。

</Note>
---

## All SVG components {/*all-svg-components*/}
## すべての SVG コンポーネント {/*all-svg-components*/}

React supports all built-in browser SVG components. This includes:
React は、組み込みのブラウザ SVG コンポーネントをすべてサポートしています。以下が含まれます。

* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
* [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
Expand Down Expand Up @@ -242,20 +242,20 @@ React supports all built-in browser SVG components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)

Namespaced attributes also have to be written without the colon:

* `xlink:actuate` becomes `xlinkActuate`.
* `xlink:arcrole` becomes `xlinkArcrole`.
* `xlink:href` becomes `xlinkHref`.
* `xlink:role` becomes `xlinkRole`.
* `xlink:show` becomes `xlinkShow`.
* `xlink:title` becomes `xlinkTitle`.
* `xlink:type` becomes `xlinkType`.
* `xml:base` becomes `xmlBase`.
* `xml:lang` becomes `xmlLang`.
* `xml:space` becomes `xmlSpace`.
* `xmlns:xlink` becomes `xmlnsXlink`.
[DOM 標準](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)と同様に、React では props の名前として `camelCase` 規則を使用します。例えば、`tabindex` ではなく `tabIndex` と書きます。既存の SVG を JSX に変換するための[オンラインコンバータ](https://transform.tools/html-to-jsx)を使用できます。

名前空間付きの属性もコロンなしで書かなければなりません。

* `xlink:actuate` は `xlinkActuate` になります。
* `xlink:arcrole` は `xlinkArcrole` になります。
* `xlink:href` は `xlinkHref` になります。
* `xlink:role` は `xlinkRole` になります。
* `xlink:show` は `xlinkShow` になります。
* `xlink:title` は `xlinkTitle` になります。
* `xlink:type` は `xlinkType` になります。
* `xml:base` は `xmlBase` になります。
* `xml:lang` は `xmlLang` になります。
* `xml:space` は `xmlSpace` になります。
* `xmlns:xlink` は `xmlnsXlink` になります。

</Note>