为什么不允许在React中返回多个元素？

Question

它只能在render中返回一个元素标签。
在v16中，我们可以使用数组来呈现多个元素。
那么为什么不能在React中直接编写多个元素标签呢？

QAGroup.objects.exists()

我的意思是为什么不能渲染多个元素，而不能渲染多个元素。

Answer 1

React实现依赖于构造用于协调的树状结构。当您从render方法的React元素返回多个元素时，假设树将具有Component的一个根节点的假设将不再成立，因此将难以处理协调算法。

因此，react给您提供根节点的限制。如果从v16开始返回元素数组，react将在内部创建一个虚拟节点作为父节点。

从16.2版开始，React提供了一个React.Fragment组件，该组件提供了一种更简洁的语法来返回多个元素

render(){
  return(
    <React.Fragment>
       <div />
       <div />
    </React.Fragment>
  )
}

Answer 2

React需要一个父元素来呈现任何内容。您可以将它们放在一个数组中，也可以使用它们专门用于此目的的工具fragment组件。

片段只是一个空节点，不会在DOM中显示，允许您将多个JSX组件彼此相邻返回：

render(){
  return(
    <>
      <div />
      <div />
    </>
  )
}

如果您的短毛绒不喜欢它，则可以使用React.Fragment代替：

render(){
  return(
    <React.Fragment>
      <div />
      <div />
    </React.Fragment>
  )
}

您问题的简短答案是...这就是React的工作方式以及其渲染引擎的设计方式。

目前，放在一起的多个元素不会被解释为数组。

Answer 3

您可以尝试

render(){
  return[
    <div> Div 1</div>,
    <div> Div 2</div>,
    <div> Div 3</div>,
    <div> Div 4</div>
  ]
}