在使用带有React的.map()时如何在单个div中包装JSX元素？

Question

我想做的事:

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

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

怎么了:

我收到此错误:

Syntax Error: Adjacent JSX elements must be wrapped in an enclosing tag

我的代码是什么样的:

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函数来完成它.你如何将整个回应包裹在其中？

Answer 1

尝试下面,当body处于花括号时.map需要return声明.

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>
  );
}