You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reference-react.md
+28-3Lines changed: 28 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,12 +37,18 @@ See [Using React without JSX](/docs/react-without-jsx.html) for more information
37
37
38
38
### Transforming Elements
39
39
40
-
`React`also provides some other APIs:
40
+
`React` provides several APIs for manipulating elements:
41
41
42
42
-[`cloneElement()`](#cloneelement)
43
43
-[`isValidElement()`](#isvalidelement)
44
44
-[`React.Children`](#reactchildren)
45
45
46
+
### Fragments
47
+
48
+
`React` also provides a component for rendering a multiple elements without a wrapper.
49
+
50
+
-[`React.Fragment`](#reactfragment)
51
+
46
52
* * *
47
53
48
54
## Reference
@@ -87,7 +93,7 @@ React.createElement(
87
93
)
88
94
```
89
95
90
-
Create and return a new [React element](/docs/rendering-elements.html) of the given type. The type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/docs/components-and-props.html) type (a class or a function).
96
+
Create and return a new [React element](/docs/rendering-elements.html) of the given type. The type argument can be either a tag name string (such as `'div'` or `'span'`), a [React component](/docs/components-and-props.html) type (a class or a function), or a [React fragment](#reactfragment) type.
91
97
92
98
Code written with [JSX](/docs/introducing-jsx.html) will be converted to use `React.createElement()`. You will not typically invoke `React.createElement()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more.
93
99
@@ -123,7 +129,7 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi
123
129
React.createFactory(type)
124
130
```
125
131
126
-
Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/docs/components-and-props.html) type (a class or a function).
132
+
Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), a [React component](/docs/components-and-props.html) type (a class or a function), or a [React fragment](#reactfragment) type.
127
133
128
134
This helper is considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
129
135
@@ -192,3 +198,22 @@ Returns the `children` opaque data structure as a flat array with keys assigned
192
198
> Note:
193
199
>
194
200
> `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
201
+
202
+
* * *
203
+
204
+
### `React.Fragment`
205
+
206
+
The `React.Fragment` component lets you return multiple elements in a `render()` method without creating an additional DOM element:
207
+
208
+
```javascript
209
+
render() {
210
+
return (
211
+
<React.Fragment>
212
+
Some text.
213
+
<h2>A heading</h2>
214
+
</React.Fragment>
215
+
);
216
+
}
217
+
```
218
+
219
+
You can also use it with the shorthand `<></>` syntax. For more information, see [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html).
0 commit comments