[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 ```jsx
class Info extends React.Component { class Info extends React.Component {
render () { render () {
const { avatar, username } = this.props const { avatar, username } = this.props
return <React.Fragment> return (
<UserAvatar src={avatar} /> <React.Fragment>
<UserProfile username={username} /> <UserAvatar src={avatar} />
</React.Fragment> <UserProfile username={username} />
</React.Fragment>
)
} }
} }
``` ```