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

转载于:https://www.cnblogs.com/zyl-Tara/p/11021766.html