[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:
parent
3e1d6d425a
commit
a209d9ac87
13
react.md
13
react.md
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue