Question

我有一些React this JS 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 正确但遗憾地导致无声失败：

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

这是因为（恐怖）自动分号插入，它将在;之后插入return，使其成为：

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

，例如return;后跟React.createElement来电永不执行。

内联Babel脚本：意外的令牌

1 个答案: