javascript - 内联 Babel 脚本 : Unexpected token

Question

我有this JS fiddle与一些 react 。 fiddle 中的大部分代码都是不相关的，除了这部分:

class TodoApp extends Component {
    render() {
    return {
        <div>
        <button onClick={() => {
            store.dispatch({
            type: 'ADD_TODO',
            text: 'Test',
            id: nextTodoId++
          })
        }}>
            Add Todo
        </button>
        <ul>
            {this.props.todos.map(todo =>
            <li key={todo.id}>
                {todo.text}
            </li>
          )}
        </ul>
      </div>
    }
  }
}

解释时，我在浏览器中收到此错误:

Uncaught SyntaxError: Inline Babel script: Unexpected token (130:5)
  128 |     render() {
  129 |     return {
> 130 |         <div>
      |         ^

我不明白为什么无法识别 JSX。

我已将此添加到 HTML 部分:

<script src="https:// fb.me /react-0.14.3.js"></script>
<script src="https:// fb.me /react-dom-0.14.3.js"></script>

因为我得到了 React 和 React DOM 脚本(我在 URL 中添加了一些空格，否则我无法发布问题)，JSX 代码应该被正确解释，对吧？

Answer 1

你不应该在你的 JSX 周围使用 { 和 }，你应该使用 ( 和 ):

return (
        <div>
        ...
        </div>
       );

Fixed Fiddle (当您单击“添加待办事项”时会显示其他问题，但语法错误已修复)

那就是如果你想在它周围使用任何东西；这不是必需的，但很常见。这也是有效的:

return <div>
    ...
    </div>;

你看到 (...) 这么多的原因是这是不正确的，但遗憾的是会导致静默失败:

// NOT CORRECT
return
    <div>
    ...
    </div>;

这是因为(可怕的是)自动分号插入，它会在 return 之后插入一个 ;，使得它:

// NOT CORRECT
return;
    <div>
    ...
    </div>;

例如，return; 后跟永远不会执行的 React.createElement 调用。