react组件中返回并列元素的方法

作者: MJ 分类: react 发布时间: 2019-05-09 09:47

我们在写react组件的时候,经常会遇到这种问题,在render中return元素只能有一个顶级元素,比如div,假如写成这样就会报错:

render(){
    return(
        <div>123</div>
        <div>456</div>
    )
}

因为return中只能有一个顶级的包裹元素:

render(){
    return(
        <div>
            <div>456</div>
        </div>
    )
}

这样可以解决问题,但是这样会有一个问题,就是多了一层div,我现在不想多一层div,但又可以并列展示,总结了几种办法:

1:数组的形式

render(){
    return[
        <div>123</div>,
        <div>456</div>
    ]
}

2:React.Fragment

render(){
    return(
        <React.Fragment>
            <div>123</div>
            <div>456</div>
        </React.Fragment>
    )
}

3:高阶组件的形式

const ComponentDemo = ({ children }) => children;
render(){
    return(
        <ComponentDemo>
            <div>123</div>
            <div>456</div>
        </ComponentDemo>
    )
}

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注