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

我们在写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>
    )
}

或者

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

3:高阶组件的形式

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

 

原文地址:https://www.love85g.com/?p=1746

posted @ 2019-06-14 09:49  一江西流  阅读(...)  评论(...编辑  收藏