javascript - map() 中的两个导入 div

Question

我正在考虑在 map() 中嵌入两个导入的可能性。我的 react 代码如下所示:

{this.state.dataExample.map(item => (                            
    <ItemsSection nameSection={item.name} />  

    item.data.map((post, index) => (

       <ItemsTasks
          key={index}
          title={post.name}
       />

    ))

))}

结果:

// from ItemsSection
<div className="items-section-name">
    <div className="section-name">{nameSection}</div>
</div>
// from ItemsTasks
<div className="item-data">
    <div className="item-title">{title}</div>
<div className="item-data">
    <div className="item-title">{title}</div>
</div>

这段代码应该说明我想要得到什么。尝试为每个“元素”导入一个单独的 div。上面的代码报告语法错误，但我不知道该怎么做。

Answer 1

来自docs ,

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

您可以使用 Fragment，短语法 <></> (它看起来像空标签)，

{
  this.state.dataExample.map(item => (
    <>
      <ItemsSection nameSection={item.name} />  
      {
        item.data.map((post, index) => (
           <ItemsTasks
              key={index}
              title={post.name}
           />
        ))
      }
    </>                       
  ))
}

或者您可以导入 Fragment来自 react包，

import React, {Fragment} from 'react';


{
  this.state.dataExample.map(item => (
    <Fragment>
      <ItemsSection nameSection={item.name} />  
      {
        item.data.map((post, index) => (
           <ItemsTasks
              key={index}
              title={post.name}
           />
        ))
      }
    </Fragment>                       
  ))
}