React学习笔记（七） fragments

我们知道，对于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>
        )
    }

报错如下