Javascript 在将.map（）与React一起使用时，如何将JSX元素包装在单个div中？

我想做的是：

将项目列表呈现为另一个组件中的组件

<div>
...
  <RenderBuildings buildings={this.props.buildingData} />
...
</div>

我的代码是什么样子的：

const RenderBuildings = (props) => {
       return (
         props.buildings.allComps.map((building, index) => {
            let id = index + 1
              <TableRow>
                <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
                <TableRowColumn>{building.name}</TableRowColumn>
                <TableRowColumn>{building.address}</TableRowColumn>
                <TableRowColumn>{building.status}</TableRowColumn>
              </TableRow>
            )}
          )
  }

我怀疑发生了什么：

似乎很清楚，整个过程应该以某种方式包装在一个div中，但我不确定如何使用map函数来实现这一点。如何将整个响应封装在其中？

请尝试下面的内容。当body在大括号中时，map需要一个return语句

const RenderBuildings=props=>{ 回来 {props.buildings.allComps.mapbuilding，索引=>{ 设id=index+1； 回来 {id} {building.name} {building.address} {building.status} ; };} ; } 请尝试下面的操作。当主体位于花括号中时，.map需要返回语句

const RenderBuildings=props=>{ 回来 {props.buildings.allComps.mapbuilding，索引=>{ 设id=index+1； 回来 {id} {building.name} {building.address} {building.status} ; };} ;

---

} 我假设你在建一张桌子

   import React, { Fragment } from 'react'
   const RenderBuildings = (props) => {
   return (
     <Fragment>
      {
        props.buildings.allComps.map((building, index) => {
          let id = index + 1
          return (
             <TableRow key={id}>
               <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
               <TableRowColumn>{building.name}</TableRowColumn>
               <TableRowColumn>{building.address}</TableRowColumn>
               <TableRowColumn>{building.status}</TableRowColumn>
            </TableRow>
          )
        })
       }
   </Fragment >
  )
}

---

我假设你在建一张桌子

   import React, { Fragment } from 'react'
   const RenderBuildings = (props) => {
   return (
     <Fragment>
      {
        props.buildings.allComps.map((building, index) => {
          let id = index + 1
          return (
             <TableRow key={id}>
               <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
               <TableRowColumn>{building.name}</TableRowColumn>
               <TableRowColumn>{building.address}</TableRowColumn>
               <TableRowColumn>{building.status}</TableRowColumn>
            </TableRow>
          )
        })
       }
   </Fragment >
  )
}

---

我相信这就是你想要实现的目标：

const RenderBuildings=props=>{ 回来 props.buildings.allComps.mapbuilding，索引=>{ 设id=index+1 {id} {building.name} {building.address} {building.status} }

---

我相信这就是你想要实现的目标：

const RenderBuildings=props=>{ 回来 props.buildings.allComps.mapbuilding，索引=>{ 设id=index+1 {id} {building.name} {building.address} {building.status} }

---

你没有从mapTableRow返回任何东西必须有密钥属性你也可以使用Fragment组件你没有从mapTableRow返回任何东西必须有密钥属性你也可以使用Fragment组件很棒！这绝对有效，这很奇怪，因为我以为我试过了，但当我复制粘贴你的代码时rked。看起来我的想法是对的，只是一些奇怪的语法错误。太好了！这绝对有效，这很奇怪，因为我认为我已经尝试过了，但当我复制粘贴你的代码时，它起了作用。看起来我的想法是对的，只是一些奇怪的语法错误。片段是在react 16.2中引入的，所以请确保如果要使用，请使用当前版本的react。片段是在react 16.2中引入的，因此如果要使用，请确保使用的是当前版本的react。

This is correct code for you..

const RenderBuildings = (props) => {
  return (
    <div>
    {props.buildings.allComps.map((building, index) => {
      let id = index + 1;
      return (
        <TableRow key={'row' + index}>
          <TableRowColumn style={{width: 12}}>{id}</TableRowColumn>
          <TableRowColumn>{building.name}</TableRowColumn>
          <TableRowColumn>{building.address}</TableRowColumn>
          <TableRowColumn>{building.status}</TableRowColumn>
          </TableRow>
      );
     });}
    </div>
  );
}


As you mention you try this but i think you forgot to add return in map funtion. Because I was also done similar mistake when i just start coding in es6.