Javascript 如何解析相邻的JSX元素必须包装在React中的封闭标记问题中

我有业务，我正在尝试返回业务数组，我正在为此使用映射概念，我正在尝试添加新的部分，当索引==3时，我也在尝试在不添加父div的情况下获得此结果。请检查我的代码

---

从React 16.2开始，可以使用片段。在JSX中，您可以简单地将元素包装成一个空名称的元素：

<>
  Some text.
  <h2>A heading</h2>
  More text.
  <h2>Another heading</h2>
  Even more text.
</>

一些文本。
标题
更多文本。
另一标题
更多的文本。

~z~例如

---

如果使用Babel传输代码，则可能需要使用

，而不是从React 16.2开始使用

，您可以使用片段。在JSX中，您可以简单地将元素包装成一个空名称的元素：

<>
  Some text.
  <h2>A heading</h2>
  More text.
  <h2>Another heading</h2>
  Even more text.
</>

一些文本。
标题
更多文本。
另一标题
更多的文本。

~z~例如

---

如果您使用Babel传输代码，则可能需要使用

而不是

返回非单个元素的响应内容，从而导致错误。这是不允许的（至少反应<16.2）。您可以在React中解决它，但问题本身存在于业务逻辑中

你可以在React之外更好地解决这个问题。看来你要做的是：

如果数组的长度小于3，则不执行任何操作

否则，添加一个元素添加位置3，将剩余部分向下推

下面的渲染将支持这一点

render() {
    const shouldAddElement = companies.length >= 3;
    // We make a copy to prevent us from modifying the original, which is not in the class scope
    const companyCopy = [...companies];
    if(shouldAddElement) {
        companyCopy.splice(3, 0, 'newSection');
    }
    return <div>{totalList}</div>;
}

render（）{
const shouldAddElement=companys.length>=3；
//我们制作一个副本以防止修改不在类范围内的原始文件
const companyCopy=[…公司]；
如果（应添加元素）{
公司拷贝拼接（3，0，'新段'）；
}
返回{totalist}；
}

---

您还可以查看

该错误是由返回某个非单个元素的响应内容引起的。这是不允许的（至少反应<16.2）。您可以在React中解决它，但问题本身存在于业务逻辑中

你可以在React之外更好地解决这个问题。看来你要做的是：

如果数组的长度小于3，则不执行任何操作

否则，添加一个元素添加位置3，将剩余部分向下推

下面的渲染将支持这一点

render() {
    const shouldAddElement = companies.length >= 3;
    // We make a copy to prevent us from modifying the original, which is not in the class scope
    const companyCopy = [...companies];
    if(shouldAddElement) {
        companyCopy.splice(3, 0, 'newSection');
    }
    return <div>{totalList}</div>;
}

render（）{
const shouldAddElement=companys.length>=3；
//我们制作一个副本以防止修改不在类范围内的原始文件
const companyCopy=[…公司]；
如果（应添加元素）{
公司拷贝拼接（3，0，'新段'）；
}
返回{totalist}；
}

---

您还可以查看，正如@tech4him解释的，您可以使用片段，如果您无法运行v16.2，您可以尝试v16.0片段，这将允许您获得如下内容：

   {
    business.map((data,index) => {
        return index===3 
        ? [<div key="A">New Section</div>, <div key="B">{data}</div>]
        : <div>{data}</div>
    })
   }

{
business.map（（数据、索引）=>{
返回索引===3
？[新的一节，{data}]
：{data}
})
}

---

您可以找到有关React v16.0片段的更多信息，@tech4him解释说您可以使用片段，如果您无法运行v16.2，您可以尝试v16.0片段，这将允许您获得如下内容：

   {
    business.map((data,index) => {
        return index===3 
        ? [<div key="A">New Section</div>, <div key="B">{data}</div>]
        : <div>{data}</div>
    })
   }

{
business.map（（数据、索引）=>{
返回索引===3
？[新的一节，{data}]
：{data}
})
}

---

你可以找到关于React v16.0 fragments的更多信息

是的，我知道，但是添加额外的div会使我的设计布局崩溃，这就是为什么我希望在不添加额外div的情况下实现。。还有其他方法吗？在react的最新版本中，您可以将它们包装在

中，即空JSX标记中。最新的

react

和最新的

babel预设react

。是的，我知道，但是添加额外的div会使我的设计布局崩溃，这就是为什么我想在不添加额外div的情况下实现。。还有其他方法吗？在react的最新版本中，您可以将它们包装在

中，即空JSX标记中。最新的

react

和最新的

babel预置react

。同意，修复逻辑本身是最佳选择。同意，修复逻辑本身是最佳选择。