解析错误：意外的标记，预期的“，”

Question

我在react js中有以下代码。

class Posts extends Component {
  render() {
    return (
      {console.log('test')}
    );
  }
}

运行此代码后，我收到错误

Parsing error: Unexpected token, expected ","

   8 |     return (
>  9 |       {console.log('test')}
     |       ^
  10 |     );
  11 |   }
  12 | }

更新

用父标签包装它会返回相同的错误

>  9 |       <div>
     |       ^
  10 |         {console.log('nothing')}
  11 |       </div>

更新

这是全班同学

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Post extends Component {
  render() {
    return (
      <div>
        {console.log('test')}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    posts: state
  }
};

export default Post;

Answer 1

返回 jsx 时，您始终需要有一个包装父 JSX 标记。由于您没有任何 jsx 标签，因此它只是无效的 javascript。应该：

class Posts extends Component {
  render() {
    return console.log('test')
  }
}

或者如果你想要 jsx

class Posts extends Component {
  render() {
    return (
      <div>
        {console.log('test')}
      </div>
    )
  }
}

编辑 (2020-1-19)

jsx 现在支持父闭包的空标签：

class Posts extends Component {
  render() {
    return (
      <>
        {console.log('test')}
      </>
    )
  }
}