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

IT技术 javascript reactjs
2021-05-05 09:47:03

我在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;
4个回答

返回 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')}
      </>
    )
  }
}

在 react js 中，你必须在 attr 中放置一个值。

一个有效的例子

<option selected={this.props.info.gender == 0 ? 'selected' : ''} value='0'>men</option>
<option selected={this.props.info.gender == 1 ? 'selected' : ''} value='1'>female</option>

不工作

<option {this.props.info.gender == 0 ? 'selected' : ''} value='0'>men</option>
<option {this.props.info.gender == 1 ? 'selected' : ''} value='1'>female</option>

@Mehrdad Masoumi，有一个大错误，这是真的： 

<option selected={this.props.info.gender == **1** ? 'selected' : ''} value='**1**'>men</option>
<option selected={this.props.info.gender == **0** ? 'selected' : ''} value='**0**'>female</option>

@null 使用返回 console.log 的回调。

阿信

() => console.log('test')
其它你可能感兴趣的问题
上一篇同一react组件的多个实例 下一篇在 prusa mk3 上挤出 Proto-pasta 细丝的问题