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
}

这是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() {
    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）：

注意：

一个限制： React组件只能呈现单个根   节点。如果要返回多个节点，则必须将它们包装在一个节点中   单根。

您需要将<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>
  )
}

希望这有帮助

无法迭代React组件来创建表。意外的标记

2 个答案: