在ES6中传递参数（反应），语法错误：未知：意外的令牌

Question

尝试构建一个可生成表的react组件。 它调用rails api来获取其数据。 数据作为哈希数组到达此组件。

在下面的第13行，我收到“ SyntaxError：未知：意外令牌”。

我想将创建行的逻辑移到方法（makeRow）。 我缺少明显的东西。 我可以很好地访问散列，将它们显示在表格行中，但是我不知道如何将散列传递给makeRow方法。 如代码中的注释所示，它在第13行上引发语法错误。

class ProductsTable extends React.Component {


constructor(props) {
    super(props);
  }

  render(){
    if (this.props.data){
        let rows = [];
      //debugger
      for ( var i =0; i < this.props.data.length; i++){
        //debugger
        //this.props.data[i] = {id: 5, name: "Enfield", description: "Bullet 500", price: "$5000005"}
        rows.push(<tr>{< this.makeRow(this.props.data[i]) />}</tr>)
        //                           ^ SyntaxError: unknown: Unexpected token
      }
      return (
          <div>
          <table id="product-table">
              <tbody>
              { rows }
            </tbody>
          </table>          
          </div>
    )} else {return(null)};
  }

  makeRow(row){
    //debugger
    return (<td> row.name </td>);
  }

}

Answer 1

尖括号仅保留给组件使用。 如果有任何组件，则应使用<MyComponent /> 。 对于jsx中的JavaScript，我们必须仅通过使用大括号来使用纯JavaScript逻辑。 <MyComponent>{this.state.name}</MyComonent>