Question

我看到当返回多个元素的JSX代码时，React会引发错误，因此它需要始终使用以下3个选项包装这些元素：

<>
<React.Fragment>
<div>

例如这个有效：

const myReactComponent = () => {
   return (
     <div>
       <div>Div 1</div>
       <div>Div 2</div>
     </div>
   )
}

代替：

const myReactComponent = () => {
   return (
       <div>Div 1</div>
       <div>Div 2</div>
   )
}

Answer 1

JSX向下编译为React.createElement()。

<div>Test</div>

等同于

React.createElement('div', 'Test');

由于React.createElement()仅创建组件所需的单个元素，因此JSX表达式必须具有一个元素。

Answer 2

根据React：

React中的常见模式是组件返回多个元素。片段使您可以将子列表分组，而无需添加 DOM的额外节点。

这意味着React需要单个根元素，例如单个<div></div>

现在，如果您使用多个<div></div>，这实际上不是React所希望的，为了消除此问题，React引入了<React.Fragment></React.Fragment>或简写为<></>，这将使您能够将多个子项分组单个<div></div>中的所有组件，这些组件已经在您的父组件中的App组件中取消了。

为什么要指定包装元素：JSX返回中的<div>或<React.Fragment>或<>？

2 个答案: