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你可以看到巴贝尔的所作所为。

尝试使用第一个示例的语法进行更改，看看会发生什么，然后我认为这会让事情更加清晰。

Answer 2

目前的答案都不适用于React 16.在render()方法中返回字符串，甚至是字符串数组都是完全没问题的。它不一定是反应成分。

您的问题是对JSX转换器如何工作的误解。你真正需要知道的是，JSX转换器在遇到可以清楚地识别为JSX（某些<xml />）的东西之前什么都不做。你的第一个例子没有JSX。

JSX是一种递归算法，可在JSX模式和JavaScript模式之间来回切换。 <xml />标记告诉转录程序切换到JSX模式。在JSX模式下，JSX大括号语法（{echo stuff}）用于切换回JavaScript模式。

您正在尝试使用大括号语法切换回JavaScript模式而不处于JSX模式。由于您的第一个示例不包含JSX，因此JSX转换器将按原样将其传递给Babel进程的其余部分。语法

{array[0]}

无效的JavaScript。巴别塔会认为你正试图宣布一个物体。为此，Babel期望使用普通对象文字语法：

{ apple: array[0] }

或es6属性值简写：

{ apple } // assuming `apple` is a variable in scope

如果您想要渲染数组的0元素，请使用

return array[0]

Answer 3

我相信因为render方法只能render a single root ，所以你需要做的就是将它包装在inisde有效的HTML标签中，如下所示：

render() {
    return (<div> {/* any valid js element */}</div>);
}

Answer 4

react组件呈现必须返回一个有效的HTML，并将其包装到单个HTML容器标记（例如DIV）中。我想你应该仔细检查反应是如何起作用的。

render() {
  return <div>
  </div>
}