- 由于 React 规定, 组件中只能有一个根元素
- 所以每次编写组件的时候, 我们都需要在最外层包裹一个冗余的标签
import React from 'react';
class Home extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
heroList: ['鲁班', '虞姬', '黄忠']
}
}
render() {
return (
<div>
<p>{this.state.heroList[0]}</p>
<p>{this.state.heroList[1]}</p>
<p>{this.state.heroList[2]}</p>
</div>
)
}
}
class App extends React.PureComponent {
render() {
return (
<Home/>
)
}
}
export default App;
- 如果不想渲染这个冗余的标签, 那么就可以使用
Fragment
来代替
import React from 'react';
class Home extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
heroList: ['鲁班', '虞姬', '黄忠']
}
}
render() {
return (
<React.Fragment>
<p>{this.state.heroList[0]}</p>
<p>{this.state.heroList[1]}</p>
<p>{this.state.heroList[2]}</p>
</React.Fragment>
)
}
}
class App extends React.PureComponent {
render() {
return (
<Home/>
)
}
}
export default App;
语法糖
import React from 'react';
class Home extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
heroList: ['鲁班', '虞姬', '黄忠']
}
}
render() {
return (
<>
<p>{this.state.heroList[0]}</p>
<p>{this.state.heroList[1]}</p>
<p>{this.state.heroList[2]}</p>
</>
)
}
}
class App extends React.PureComponent {
render() {
return (
<Home/>
)
}
}
export default App;
- 如果需要给 Fragment 添加 key, 那么就不能使用语法糖写法
import React from 'react';
class Home extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
heroList: ['鲁班', '虞姬', '黄忠']
}
}
render() {
return (
<>
{
this.state.heroList.map(name => {
return (
<React.Fragment key={name}>
<p>{name}</p>
</React.Fragment>
)
})
}
</>
);
}
}
class App extends React.PureComponent {
render() {
return (
<Home/>
)
}
}
export default App;
官方文档