[react] [docs] add React.Fragment example to new features
This commit is contained in:
parent
a209d9ac87
commit
ed9ff3ca12
21
react.md
21
react.md
|
@ -124,7 +124,7 @@ class Info extends React.Component {
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
{: data-line="6,7"}
|
{: data-line="5,6,7,8,9,10"}
|
||||||
|
|
||||||
Nest components to separate concerns.
|
Nest components to separate concerns.
|
||||||
|
|
||||||
|
@ -422,8 +422,11 @@ New features
|
||||||
------------
|
------------
|
||||||
{: .-three-column}
|
{: .-three-column}
|
||||||
|
|
||||||
### Returning fragments
|
### Returning multiple elements
|
||||||
|
|
||||||
|
You can return multiple elements as arrays or fragments.
|
||||||
|
|
||||||
|
**Arrays**
|
||||||
```js
|
```js
|
||||||
render () {
|
render () {
|
||||||
// Don't forget the keys!
|
// Don't forget the keys!
|
||||||
|
@ -435,7 +438,19 @@ render () {
|
||||||
```
|
```
|
||||||
{: data-line="3,4,5,6"}
|
{: data-line="3,4,5,6"}
|
||||||
|
|
||||||
You can return multiple nodes as arrays.
|
**Fragments**
|
||||||
|
```js
|
||||||
|
render () {
|
||||||
|
// Fragments don't require keys!
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<li>First item</li>
|
||||||
|
<li>Second item</li>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{: data-line="3,4,5,6,7,8"}
|
||||||
|
|
||||||
See: [Fragments and strings](https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings)
|
See: [Fragments and strings](https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue