Skip to content

Commit c90276f

Browse files
author
Clement Hoang
committed
Update top level API for fragments
1 parent 938f853 commit c90276f

File tree

1 file changed

+28
-3
lines changed

1 file changed

+28
-3
lines changed

content/docs/reference-react.md

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,18 @@ See [Using React without JSX](/docs/react-without-jsx.html) for more information
3737

3838
### Transforming Elements
3939

40-
`React` also provides some other APIs:
40+
`React` provides several APIs for manipulating elements:
4141

4242
- [`cloneElement()`](#cloneelement)
4343
- [`isValidElement()`](#isvalidelement)
4444
- [`React.Children`](#reactchildren)
4545

46+
### Fragments
47+
48+
`React` also provides a component for rendering a multiple elements without a wrapper.
49+
50+
- [`React.Fragment`](#reactfragment)
51+
4652
* * *
4753

4854
## Reference
@@ -87,7 +93,7 @@ React.createElement(
8793
)
8894
```
8995

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.
9197

9298
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.
9399

@@ -123,7 +129,7 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi
123129
React.createFactory(type)
124130
```
125131

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.
127133

128134
This helper is considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
129135

@@ -192,3 +198,22 @@ Returns the `children` opaque data structure as a flat array with keys assigned
192198
> Note:
193199
>
194200
> `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

Comments
 (0)