Javascript 意外的标记，应为“&引用；return语句中react render（）函数的内部

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（本）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.state={comments:[]}
}
handleSubmit（事件）{
// ...
}
render（）{
const comments=this.state.comments.map（（comment）=>{
});
const formcomment=；
返回(
{评论}
{formcomment}//此处有错误
)
}
}
ReactDOM.render（，document.getElementById（“根”））

您是否尝试过将返回值包装在

div

或片段（

）中？

问题出现了，因为JSX要求您只有一个根元素。在您的例子中，有两个根元素

如果要返回多个元素，需要将它们包装到某种容器中，大多数情况下，一个简单的

div

就足够了：

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

---

.

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

您应该能够通过添加

…来解决此问题（或者更简单地说，
…
）围绕返回语句的内容。这将为JSX transpiler提供一个单独的元素进行渲染

通常的修复方法是使用“wrapper div”，但使用这样的片段是包装元素而不向DOM添加节点的新方法

虽然
div
会修复错误，但它会改变预期的返回值，而片段不会。由于React 16，您甚至可以返回一个数组，
return[comments，formcomment]我刚刚用一个片段通知更新了我的答案：）我不知道你可以返回数组，谢谢你指出。我会相应地调整我的答案并给你评分！
render() {
  return [comments, formcomment];
}