javascript - 无法在 return() React JSX 中使用 block

Question

我正在学习 React JS，并面临 JSX 的问题。 我有一个组件:

class Content extends React.Component {
  render() {
    const array = ["apple", "orange"]
    return (
      {array[0]}
    )
  }
}

它抛出错误babel.min.js:7 Uncaught SyntaxError: Inline Babel script: Unexpected token, expected ,

但是如果我包裹 {array[0]}里面<span>标签，这有效。

class Content extends React.Component {
  render() {
    const array = ["apple", "orange"]
    return (
      <span>{array[0]}</span>
    )
  }
}

我认为我的核心 JavaScript 不好，请帮助我理解这个问题。谢谢。

Answer 1

问题是因为在第一个示例中您没有返回有效元素。

当组件在 render 方法中返回某些内容时，返回的是由 React.createElement 创建的 HTML 元素。

Here你可以看看 babel 做了什么。

尝试更改第一个示例的语法，看看会发生什么，然后我认为这会让您更清楚。