[react] [docs] make React.Fragment example more clear

IMHO, the previous example leads people to confusion in thinking that returning a element with a `<div>` and `<React.Fragment>` are equivalent, yet they aren't. This should clarify things up a bit and accentuate the difference.
This commit is contained in:
Rauno Freiberg 2018-03-19 10:43:23 +02:00 committed by GitHub
parent 3e1d6d425a
commit a209d9ac87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 6 deletions

View File

@ -106,18 +106,19 @@ class Info extends React.Component {
}
}
```
As of React v16.2.0
As of React v16.2.0 components can return multiple grouped elements without adding extra nodes to the DOM. In this example, you would get the nested components' nodes without a wrapping element.
```jsx
class Info extends React.Component {
render () {
const { avatar, username } = this.props
return <React.Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</React.Fragment>
return (
<React.Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</React.Fragment>
)
}
}
```