無法迭代React組件來創建表。意外的令牌

Question

我想創建一個由REST API使用ReactJS填充的表。問題是我不知道我在做什麼錯誤的sintax ...我使用ES6。

這是FooTable：

import React from 'react' 
import Foo from './Foo' 

export default class FooTable extends React.Component { 

    render() { 
    return(
    <tr> 
     <td>id</td> 
     <td>name</td> 
     <td>surname</td> 
    </tr> 
    { //<-- This is the marked error by webpack 
     this.props. Foos.map(foo=>{ 
      return < Foo key={foo.id} name={foo.name} surname={foo.surname}/> 
     }) 
    } 
    ) 
    }//end-render 
} 

這是Foo類：

import React from 'react' 

export default class Foo extends React.Component { 
    render() { 
    return <tr> 
       <td>{foo.name}</td> 
       <td>{foo.surname}</td> 
      </tr> 
    } 
} 

這是主要的渲染：

render(){ 
    if (this.state.foos.length > 0) { 
     console.log('Foos size ' + this.state.foos.length); 
     return <table> 
       <tbody> 
        <FooTable foos={this.state.foos}/> 
       </tbody> 
       </table> 
    } else { 
    return <p className="text-center">Loading Foos...</p> 
    } 
} 

的WebPack標誌着FooTable錯誤（意外令牌）。它的評論標記。

Answer 1

您需要從您的組件（在這種情況下爲FooTable）render方法中返回單個節點。

render() { 
    return(
    <tr> 
     <td>id</td> 
     <td>name</td> 
     <td>surname</td> 
    </tr> 
    { //<-- This breaks the single root 
     this.props.Foos.map(foo=>{ 
      return < Foo key={foo.id} name={foo.name} surname={foo.surname}/> 
     }) 
    } 
    ) 
    } 

你需要做的某事像這樣：

render() { 
    return (
     <tbody> 
     <tr> 
      <td>id</td> 
      <td>name</td> 
      <td>surname</td> 
     </tr> 
     {this.props.Foos.map(foo => (<Foo key={foo.id} name={foo.name} surname={foo.surname}/>))} 
    </tbody>) 
    } 

Answer 2

文檔說（見here）：

注：

一個限制：陣營組件只能渲染單個根 節點。如果您想要返回多個節點，則必須將它們封裝在一個 單根中。

你需要用你的<tr>和你<Foo>元素在一個單一的節點，例如<div>：

render() { 
    return(
    <div> 
     <tr> 
     <td>id</td> 
     <td>name</td> 
     <td>surname</td> 
     </tr> 
     { //<-- No more multiple roots 
     this.props.Foos.map(foo => { 
      return < Foo key={foo.id} name={foo.name} surname={foo.surname}/> 
     } 
    </div> 
) 
} 

希望這有助於