返回 React.Fragment 或数组有什么区别？ [复制]答案

【问题标题】：What is the difference between returning React.Fragment or an array? [duplicate]返回 React.Fragment 或数组有什么区别？ [复制]
【发布时间】：2020-05-02 07:54:19
【问题描述】：

返回React.Fragment有什么区别

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

或者返回一个组件数组

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

这里以codesandbox 为例。

【问题讨论】：

@YevgenGorbunkov This codesandbox 说你错了。第二个函数确实返回了一个有效的 React 组件。
"一个 React 组件也可以返回一个元素数组："reactjs.org/docs/jsx-in-depth.html#jsx-children
@YevgenGorbunkov 从 React v16+ 开始不再适用
这能回答你的问题吗？ React: <React.Fragment> vs array

标签： reactjs react-fragment

【解决方案1】：

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

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

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

数组中的子元素必须有一个 key 才能防止 React 的 key 警告。

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

因此，如果您想使用第二个示例，则需要为每个项目指定一个 key 属性，并且如果您使用 array，则必须确保用逗号分隔项目列表。

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

【讨论】：