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