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破坏了样式，则可能需要使用Fragment 。

在此处和此处 ，全面了解有关JSX的更多信息。

编辑：

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

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

参考 。

Answer 2

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

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

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

签出此页面以了解有关此问题和React片段的更多信息。

Answer 3

您是否尝试过将返回值包装在div或fragment（ <></> ）中？