令人困惑的语法错误

时间:2017-02-24 21:18:13

标签: reactjs jsx

这是我的React组件

import React, { Component } from 'react'

class ThingsList extends Component {

    render() {

        return (
            {this.props.things.map(thing => {
                <p> hello </p>
            })}
        )
    }
}

export default ThingsList

错误:

Syntax error: Unexpected token, expected , (8:8)

   6 |      
   7 |      return (
>  8 |          {this.props.things.map(thing => {
     |               ^
   9 |              <p> hello </p>
  10 |          })}
  11 |      )

我被困在这一段时间

1 个答案:

答案 0 :(得分:3)

您正在JavaScript中编写自由浮动jsx。您需要“开始”编写一些正确的jsx(以开头<开头)或者只编写普通的JavaScript。请记住,虽然您无法在渲染中返回元素数组。

return (
  // need to create opening JSX tag which compiles to `React.createElement`
  <span>
    {this.props.things.map(thing => {
      return <p> hello </p>
    })}
  </span>
)