javascript - 将 .map() 与 React 一起使用时如何将 JSX 元素包装在单个 div 中？

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

尝试下面，.map 需要一个 return 语句，当 body 位于花括号中时。

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