意外标记，预期的“，”在 return 语句中的 react render() 函数内

Question

错误是渲染返回函数中的意外标记，预期为“，”。我正在使用 babel 并将此文件链接到一个 html 文件中。我删除了评论类和组件以供查看。我也删除了评论表单组件。

这是 main.js：

class App extends React.Component {
    constructor(props) {
        super(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = { comments : [] }
    }
    handleSubmit(event) {
        // ...
    }
    render() {
        const comments = this.state.comments.map((comment) => {
            <Comment author={comment.author} message={comment.message} />
        });
        const formcomment = <CommentForm handleSubmit = {this.handleSubmit} />;
        return (
            {comments}
            {formcomment} // ERROR HERE
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

Answer 1

问题出现了，因为 JSX 要求你只有一个根元素。在您的情况下，您有两个根元素。

如果你想返回多个元素，你需要将它们包装到某种容器中，大多数情况下一个简单的div就足够了：

return (
  <div>
    {comments}
    {formcomment}
  </div>
);

如果div打乱了您的样式，您可能需要改用 a Fragment。

在这里和这里阅读更多关于 JSX 的一般信息。

编辑：

正如Emile Bergeron指出的，你也可以从 React 16.2 开始返回一个数组：

render() {
  return [comments, formcomment];
}

参考。