Skip to content

Translate "isValidElement" #691

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
smikitky merged 2 commits into from
Oct 10, 2023
Merged

Translate "isValidElement" #691

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8c70ef
Translate "isValidElement"
smikitky Sep 27, 2023
14e76a7
微修正
smikitky Sep 27, 2023
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
Prev Previous commit
微修正
  • Loading branch information
@smikitky
smikitky committed Sep 27, 2023
commit 14e76a7b5ee01afe56b2962ed83eb2b3c9fb6675
22 changes: 11 additions & 11 deletions src/content/reference/react/isValidElement.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: isValidElement

<Intro>

`isValidElement` は値が React 要素 (React element) であるかどうかを確認します。
`isValidElement` は値が React 要素 (React element) であるかどうかを判定します。

```js
const isElement = isValidElement(value)
Expand All @@ -20,7 +20,7 @@ const isElement = isValidElement(value)

### `isValidElement(value)` {/*isvalidelement*/}

`isValidElement(value)` を呼び出して、`value` が React 要素であるかどうかを確認します。
`isValidElement(value)` を呼び出して、`value` が React 要素であるかどうかを判定します。

```js
import { isValidElement, createElement } from 'react';
Expand All @@ -39,25 +39,25 @@ console.log(isValidElement({ age: 42 })); // false

#### 引数 {/*parameters*/}

* `value`: 確認対象の値。任意の型の値を指定できます。
* `value`: 判定対象の値。任意の型の値を指定できます。

#### 返り値 {/*returns*/}

`isValidElement` は `value` が React 要素であれば `true` を返します。それ以外の場合は `false` を返します。

#### 注意点 {/*caveats*/}

* **[JSX タグ](/learn/writing-markup-with-jsx)と [`createElement`](/reference/react/createElement) によって返されるオブジェクトだけが React 要素とみなされます**。例えば、`42` のような数値は有効な React *ノード (node)* ではあります（コンポーネントから返すことができるため）が、有効な React 要素ではありません。配列や、[`createPortal`](/reference/react-dom/createPortal) で作成されたポータルも、React 要素とは*見なされません*。
* **React 要素と見なされるのは、[JSX タグ](/learn/writing-markup-with-jsx)と、[`createElement`](/reference/react/createElement) によって返されるオブジェクトだけです**。例えば、`42` のような数値は有効な React *ノード (node)* ではあります（コンポーネントから返すことができるため）が、有効な React 要素ではありません。配列や、[`createPortal`](/reference/react-dom/createPortal) で作成されたポータルも、React 要素とは*見なされません*。

---

## 使用法 {/*usage*/}

### 値が React 要素かどうかを確認する {/*checking-if-something-is-a-react-element*/}
### 値が React 要素かどうかを判定する {/*checking-if-something-is-a-react-element*/}

`isValidElement` を呼び出して、ある値が *React 要素*であるかどうかを確認します。
`isValidElement` を呼び出して、ある値が *React 要素*であるかどうかを判定します。

React 要素とは以下のようなものです。
React 要素とは、以下のようなものです。

- [JSX タグ](/learn/writing-markup-with-jsx)を書くことによって生成される値
- [`createElement`](/reference/react/createElement) を呼び出すことによって生成される値
Expand All @@ -78,7 +78,7 @@ console.log(isValidElement(createElement(MyComponent))); // true

文字列、数値、または任意のオブジェクトや配列などの他の値は、React 要素ではありません。

それらに対しては、`isValidElement` は `false` を返します：
それらに対しては、`isValidElement` は `false` を返します。

```js
// ❌ These are *not* React elements
Expand All @@ -90,7 +90,7 @@ console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false
```

`isValidElement` が必要となることは非常に稀です。主に、要素のみを受け入れる他の API（例えば [`cloneElement`](/reference/react/cloneElement) がそうです）を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合に役立ちます。
`isValidElement` が必要となることは非常に稀です。これが主に役立つのは、要素のみを受け入れる他の API（例えば [`cloneElement`](/reference/react/cloneElement) がそうです）を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合です。

`isValidElement` のチェックを追加するための特段の理由がない限り、おそらくこれは必要ありません。

Expand All @@ -115,14 +115,14 @@ React ノードとは、以下のようなものです。
- `true`, `false`, `null`, `undefined`（これらは表示されません）
- 他の React ノードの配列

**`isValidElement` は引数が *React 要素*であるかどうかをチェックしますが、それが React ノードであるかどうかをチェックするわけではありません**。例えば、`42` は有効な React 要素ではありません。しかし、これは完全に有効な React ノードです。
**`isValidElement` は引数が *React 要素*であるかどうかを判定しますが、それが React ノードであるかどうかを判定するわけではありません**。例えば、`42` は有効な React 要素ではありません。しかし、これは完全に有効な React ノードです。

```js
function MyComponent() {
return 42; // It's ok to return a number from component
}
```

したがって、何かがレンダーできるかどうかをチェックする方法として `isValidElement` を使うべきではありません。
したがって、何かがレンダーできるかどうかをチェックする方法として、`isValidElement` を使うべきではありません。

</DeepDive>