@@ -4,7 +4,7 @@ title: isValidElement
4
4
5
5
<Intro >
6
6
7
- ` isValidElement ` は値が React 要素 (React element) であるかどうかを確認します 。
7
+ ` isValidElement ` は値が React 要素 (React element) であるかどうかを判定します 。
8
8
9
9
``` js
10
10
const isElement = isValidElement (value)
@@ -20,7 +20,7 @@ const isElement = isValidElement(value)
20
20
21
21
### ` isValidElement(value) ` {/* isvalidelement* /}
22
22
23
- ` isValidElement(value) ` を呼び出して、` value ` が React 要素であるかどうかを確認します 。
23
+ ` isValidElement(value) ` を呼び出して、` value ` が React 要素であるかどうかを判定します 。
24
24
25
25
``` js
26
26
import { isValidElement , createElement } from ' react' ;
@@ -39,25 +39,25 @@ console.log(isValidElement({ age: 42 })); // false
39
39
40
40
#### 引数 {/* parameters* /}
41
41
42
- * ` value ` : 確認対象の値 。任意の型の値を指定できます。
42
+ * ` value ` : 判定対象の値 。任意の型の値を指定できます。
43
43
44
44
#### 返り値 {/* returns* /}
45
45
46
46
` isValidElement ` は ` value ` が React 要素であれば ` true ` を返します。それ以外の場合は ` false ` を返します。
47
47
48
48
#### 注意点 {/* caveats* /}
49
49
50
- * ** [ JSX タグ] ( /learn/writing-markup-with-jsx ) と [ ` createElement ` ] ( /reference/react/createElement ) によって返されるオブジェクトだけが React 要素とみなされます ** 。例えば、` 42 ` のような数値は有効な React * ノード (node)* ではあります(コンポーネントから返すことができるため)が、有効な React 要素ではありません。配列や、[ ` createPortal ` ] ( /reference/react-dom/createPortal ) で作成されたポータルも、React 要素とは* 見なされません* 。
50
+ * ** React 要素と見なされるのは、 [ JSX タグ] ( /learn/writing-markup-with-jsx ) と、 [ ` createElement ` ] ( /reference/react/createElement ) によって返されるオブジェクトだけです ** 。例えば、` 42 ` のような数値は有効な React * ノード (node)* ではあります(コンポーネントから返すことができるため)が、有効な React 要素ではありません。配列や、[ ` createPortal ` ] ( /reference/react-dom/createPortal ) で作成されたポータルも、React 要素とは* 見なされません* 。
51
51
52
52
---
53
53
54
54
## 使用法 {/* usage* /}
55
55
56
- ### 値が React 要素かどうかを確認する {/* checking-if-something-is-a-react-element* /}
56
+ ### 値が React 要素かどうかを判定する {/* checking-if-something-is-a-react-element* /}
57
57
58
- ` isValidElement ` を呼び出して、ある値が * React 要素* であるかどうかを確認します 。
58
+ ` isValidElement ` を呼び出して、ある値が * React 要素* であるかどうかを判定します 。
59
59
60
- React 要素とは以下のようなものです 。
60
+ React 要素とは、以下のようなものです 。
61
61
62
62
- [ JSX タグ] ( /learn/writing-markup-with-jsx ) を書くことによって生成される値
63
63
- [ ` createElement ` ] ( /reference/react/createElement ) を呼び出すことによって生成される値
@@ -78,7 +78,7 @@ console.log(isValidElement(createElement(MyComponent))); // true
78
78
79
79
文字列、数値、または任意のオブジェクトや配列などの他の値は、React 要素ではありません。
80
80
81
- それらに対しては、` isValidElement ` は ` false ` を返します:
81
+ それらに対しては、` isValidElement ` は ` false ` を返します。
82
82
83
83
``` js
84
84
// ❌ These are *not* React elements
@@ -90,7 +90,7 @@ console.log(isValidElement([<div />, <div />])); // false
90
90
console .log (isValidElement (MyComponent)); // false
91
91
```
92
92
93
- ` isValidElement ` が必要となることは非常に稀です。主に 、要素のみを受け入れる他の API(例えば [ ` cloneElement ` ] ( /reference/react/cloneElement ) がそうです)を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合に役立ちます 。
93
+ ` isValidElement ` が必要となることは非常に稀です。これが主に役立つのは 、要素のみを受け入れる他の API(例えば [ ` cloneElement ` ] ( /reference/react/cloneElement ) がそうです)を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合です 。
94
94
95
95
` isValidElement ` のチェックを追加するための特段の理由がない限り、おそらくこれは必要ありません。
96
96
@@ -115,14 +115,14 @@ React ノードとは、以下のようなものです。
115
115
- ` true ` , ` false ` , ` null ` , ` undefined ` (これらは表示されません)
116
116
- 他の React ノードの配列
117
117
118
- ** ` isValidElement ` は引数が * React 要素* であるかどうかをチェックしますが 、それが React ノードであるかどうかをチェックするわけではありません ** 。例えば、` 42 ` は有効な React 要素ではありません。しかし、これは完全に有効な React ノードです。
118
+ ** ` isValidElement ` は引数が * React 要素* であるかどうかを判定しますが 、それが React ノードであるかどうかを判定するわけではありません ** 。例えば、` 42 ` は有効な React 要素ではありません。しかし、これは完全に有効な React ノードです。
119
119
120
120
``` js
121
121
function MyComponent () {
122
122
return 42 ; // It's ok to return a number from component
123
123
}
124
124
```
125
125
126
- したがって、何かがレンダーできるかどうかをチェックする方法として ` isValidElement ` を使うべきではありません。
126
+ したがって、何かがレンダーできるかどうかをチェックする方法として、 ` isValidElement ` を使うべきではありません。
127
127
128
128
</DeepDive >
0 commit comments