將.map（）與React結合使用時，如何在單個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

請嘗試以下操作，當主體在花括號中時， .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> ); } 

Answer 2

我假設你正在建一張桌子

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

Answer 3

我相信這是您要實現的目標：

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

Answer 4

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.