reactjs - 返回 React.Fragment 或数组有什么区别？

Question

退货有区别吗React.Fragment

function Foo(){
    return (
        <>
            <div>hey</div>
            <div>hey</div>
        </>
    )
}

或者返回一个组件数组

function Bar(){
    return (
        [
            <div>hey</div>,
            <div>hey</div>,
        ]
    )
}

?

例如，这里是一个代码框。

Answer 1

来自 React 文档：https ://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

使用数组表示法与普通 JSX 有一些令人困惑的区别：

数组中的子项必须用逗号分隔。

数组中的子项必须有一个键才能防止 React 的键警告。

字符串必须用引号括起来。

因此，如果您想使用第二个示例，则需要为每个项目提供一个key道具，并且如果您使用array.

所以，Fragments只需给出一个更熟悉的语法 vs 数组