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