@@ -4,7 +4,7 @@ title: isValidElement
4
4
5
5
<Intro >
6
6
7
- ` isValidElement ` checks whether a value is a React element.
7
+ ` isValidElement ` は値が React 要素 ( React element) であるかどうかを判定します。
8
8
9
9
``` js
10
10
const isElement = isValidElement (value)
@@ -16,11 +16,11 @@ const isElement = isValidElement(value)
16
16
17
17
---
18
18
19
- ## Reference {/* reference* /}
19
+ ## リファレンス {/* reference* /}
20
20
21
21
### ` isValidElement(value) ` {/* isvalidelement* /}
22
22
23
- Call ` isValidElement(value) ` to check whether ` value ` is a React element.
23
+ ` isValidElement(value) ` を呼び出して、 ` value ` が React 要素であるかどうかを判定します。
24
24
25
25
``` js
26
26
import { isValidElement , createElement } from ' react' ;
@@ -35,34 +35,34 @@ console.log(isValidElement('Hello')); // false
35
35
console .log (isValidElement ({ age: 42 })); // false
36
36
```
37
37
38
- [ See more examples below. ] ( #usage )
38
+ [ さらに例を見る ] ( #usage )
39
39
40
- #### Parameters {/* parameters* /}
40
+ #### 引数 {/* parameters* /}
41
41
42
- * ` value ` : The ` value ` you want to check. It can be any a value of any type.
42
+ * ` value ` : 判定対象の値。任意の型の値を指定できます。
43
43
44
- #### Returns {/* returns* /}
44
+ #### 返り値 {/* returns* /}
45
45
46
- ` isValidElement ` returns ` true ` if the ` value ` is a React element. Otherwise, it returns ` false ` .
46
+ ` isValidElement ` は ` value ` が React 要素であれば ` true ` を返します。それ以外の場合は ` false ` を返します。
47
47
48
- #### Caveats {/* caveats* /}
48
+ #### 注意点 {/* caveats* /}
49
49
50
- * ** Only [ JSX tags ] ( /learn/writing-markup-with-jsx ) and objects returned by [ ` createElement ` ] ( /reference/react/createElement ) are considered to be React elements. ** For example, even though a number like ` 42 ` is a valid React * node * (and can be returned from a component), it is not a valid React element. Arrays and portals created with [ ` createPortal ` ] ( /reference/react-dom/createPortal ) are also * not * considered to be React elements.
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
- ## Usage {/* usage* /}
54
+ ## 使用法 {/* usage* /}
55
55
56
- ### Checking if something is a React element {/* checking-if-something-is-a-react-element* /}
56
+ ### 値が React 要素かどうかを判定する {/* checking-if-something-is-a-react-element* /}
57
57
58
- Call ` isValidElement ` to check if some value is a * React element. *
58
+ ` isValidElement ` を呼び出して、ある値が * React 要素 * であるかどうかを判定します。
59
59
60
- React elements are:
60
+ React 要素とは、以下のようなものです。
61
61
62
- - Values produced by writing a [ JSX tag ] ( /learn/writing-markup-with-jsx )
63
- - Values produced by calling [ ` createElement ` ] ( /reference/react/createElement )
62
+ - [ JSX タグ ] ( /learn/writing-markup-with-jsx ) を書くことによって生成される値
63
+ - [ ` createElement ` ] ( /reference/react/createElement ) を呼び出すことによって生成される値
64
64
65
- For React elements, ` isValidElement ` returns ` true ` :
65
+ React 要素に対しては、 ` isValidElement ` は ` true ` を返します。
66
66
67
67
``` js
68
68
import { isValidElement , createElement } from ' react' ;
@@ -76,9 +76,9 @@ console.log(isValidElement(createElement('p'))); // true
76
76
console .log (isValidElement (createElement (MyComponent))); // true
77
77
```
78
78
79
- Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.
79
+ 文字列、数値、または任意のオブジェクトや配列などの他の値は、 React 要素ではありません。
80
80
81
- For them, ` isValidElement ` returns ` false ` :
81
+ それらに対しては、 ` isValidElement ` は ` false ` を返します。
82
82
83
83
``` js
84
84
// ❌ These are *not* React elements
@@ -90,39 +90,39 @@ console.log(isValidElement([<div />, <div />])); // false
90
90
console .log (isValidElement (MyComponent)); // false
91
91
```
92
92
93
- It is very uncommon to need ` isValidElement ` . It's mostly useful if you're calling another API that * only * accepts elements (like [ ` cloneElement ` ] ( /reference/react/cloneElement ) does) and you want to avoid an error when your argument is not a React element.
93
+ ` isValidElement ` が必要となることは非常に稀です。これが主に役立つのは、要素のみを受け入れる他の API(例えば [ ` cloneElement ` ] ( /reference/react/cloneElement ) がそうです)を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合です。
94
94
95
- Unless you have some very specific reason to add an ` isValidElement ` check, you probably don't need it.
95
+ ` isValidElement ` のチェックを追加するための特段の理由がない限り、おそらくこれは必要ありません。
96
96
97
97
<DeepDive >
98
98
99
- #### React elements vs React nodes {/* react-elements-vs-react-nodes* /}
99
+ #### React「要素」と React「ノード」 {/* react-elements-vs-react-nodes* /}
100
100
101
- When you write a component, you can return any kind of * React node * from it:
101
+ コンポーネントを書くとき、そこからは任意の * React ノード * を返すことができます。
102
102
103
103
``` js
104
104
function MyComponent () {
105
105
// ... you can return any React node ...
106
106
}
107
107
```
108
108
109
- A React node can be:
109
+ React ノードとは、以下のようなものです。
110
110
111
- - A React element created like ` <div /> ` or ` createElement('div') `
112
- - A portal created with [ ` createPortal ` ] ( /reference/react-dom/createPortal )
113
- - A string
114
- - A number
115
- - ` true ` , ` false ` , ` null ` , or ` undefined ` (which are not displayed)
116
- - An array of other React nodes
111
+ - ` <div /> ` や ` createElement('div') ` のようにして作成された React 要素
112
+ - [ ` createPortal ` ] ( /reference/react-dom/createPortal ) で作成されたポータル
113
+ - 文字列
114
+ - 数値
115
+ - ` true ` , ` false ` , ` null ` , ` undefined ` (これらは表示されません)
116
+ - 他の React ノードの配列
117
117
118
- ** Note ` isValidElement ` checks whether the argument is a * React element, * not whether it's a React node. ** For example, ` 42 ` is not a valid React element. However, it is a perfectly valid React node:
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
- This is why you shouldn't use ` isValidElement ` as a way to check whether something can be rendered.
126
+ したがって、何かがレンダーできるかどうかをチェックする方法として、 ` isValidElement ` を使うべきではありません。
127
127
128
128
</DeepDive >
0 commit comments