我们知道,对于vue和react来说,一个组件最后return的必须只有一个根标签,如果有多个标签的话,那么就会报错,如果我们要在一个地方放入多个标签如列表li,我们的ul写在子组件中会比较好,但是这样的话我们在父组件中要对里面的li标签进行增减有时就需要修改子组件,比较麻烦,我们希望子组件可以有多个根元素,使用react时,我们可以使用fragments来解决这个问题
基本用法
看看下面的例子
class App extends React.Component{
render(){
return(
<div className="app">
<Example />
</div>
)
}
}
class Example extends React.Component{
render(){
return (
<React.Fragment>
<li>1</li>
<li>2</li>
<li>3</li>
</React.Fragment>
)
}
}
对于这段代码,我们最终在页面上看到的只有
看看控制台elements,可以发现App组件下面只有三个li元素,Example组件没有一个根元素,或者说Example的根元素有三个
这就是fragments的作用
短语法
除了上面的用法之外,如果嫌React.Fragment太长了的话,我们也可以使用短语法来实现相应的功能
将上面的Example组件使用短语法来写,代码如下
class Example extends React.Component{
render(){
return (
<>
<li>1</li>
<li>2</li>
<li>3</li>
</>
)
}
}
带key的fragments
除了上面那种用法外,我们有时也会想要将一个对象的多个属性展示出来,且是放在同一个父组件下面,这个时候也可以直接使用React.Fragment
class App extends React.Component{
constructor(props){
super(props);
this.state={
contentList:[{
id:0,
title:'todo 1'
},{
id:1,
title:'todo 2'
}]
}
}
render(){
return(
<div className="app">
{this.state.contentList.map(e=>{
return(
<React.Fragment>
<li>{e.id}</li>
<li>{e.title}</li>
</React.Fragment>
)
})}
</div>
)
}
}
这样在html中,这些li标签都在同一个div下
但是此时却会报一个错误
这是因为没有使用key的原因,加上key之后就可以解决
render(){
return(
<div className="app">
{this.state.contentList.map(e=>{
return(
<React.Fragment key={e.id}>
<li>{e.id}</li>
<li>{e.title}</li>
</React.Fragment>
)
})}
</div>
)
}
在使用key的情况下,我们无法使用短语法,否则会出现报错
render(){
return(
<div className="app">
{this.state.contentList.map(e=>{
return(
< key={e.id}>
<li>{e.id}</li>
<li>{e.title}</li>
</>
)
})}
</div>
)
}
报错如下