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

【问题标题】：unexpected token, expected "," inside of react render() function in the return statementreturn 语句中的 react render() 函数内部的意外标记，预期的“，”
【发布时间】：2019-07-09 01:32:19
【问题描述】：

错误是在渲染返回函数中的意外标记，应为“，”。我正在使用 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"))

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

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

阅读更多关于 JSX 的一般信息 here 和 here。

编辑：

正如Emile Bergeron 所指出的，您还可以从 React 16.2 返回一个数组：

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

Reference.

【讨论】：

虽然 div 可以修复错误，但它会更改预期的返回值，而片段不会。
从 React 16 开始，你甚至可以返回一个数组，return [comments, formcomment];
我只是用片段通知更新我的答案 :) 我不知道你可以返回一个数组，谢谢指出。我会相应地调整我的答案并给你信用！

【解决方案2】：

问题是您试图在没有父容器的情况下呈现多个元素。

您应该能够通过在 return 语句的内容周围添加 <Fragment> ... </Fragment>（或更简单地说，<> ... </>）来解决此问题。这将为 JSX 转译器提供一个用于渲染的元素。

通常的解决方法是使用“包装器 div”，但使用像这样的 Fragment 是包装元素而不向 DOM 添加节点的新方法。

Checkout out this page to learn more about this problem and React fragments.

【讨论】：

【解决方案3】：

您是否尝试将返回值包装在 div 或片段 (<></>) 中？

【讨论】：