Reactコンポーネントを反復してテーブルを作成できません。予期しないトークン

Question

私はReactJSを使用してREST APIで満たされたテーブルを作成しようとしています。問題は、私が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 
} 

これは、フー・クラスである：

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にエラーマーク：

import React from 'react' 

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

これはレンダリング主ですトークン）。これはコメントでマークされています。

Answer 1

コンポーネントの（この場合はFooTable）レンダリングメソッドから単一のノードを返す必要があります。

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

あなたは、このようSTHを実行する必要があります。

は

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を参照してください）：

注：

一つの制限：が反応しますコンポーネントは単一のルート0のみをレンダリングできますノード。複数のノードを返す場合は、単一ルートの にラップする必要があります。

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

が、これは

のお役に立てば幸いです：あなたはたとえば <div>のために、あなたの <tr>と単一ノードでのご <Foo>要素をラップする必要が