React JS嵌套条件渲染中.map()出现意外语法错误求助

你遇到的意外标记错误主要有两个原因，咱们一步步来解决：

1. 避免使用JavaScript保留关键字作为变量名 #

class是JavaScript的保留关键字，不能用来命名map回调里的参数，这会让解析器直接报错。你需要把它换成其他合法的变量名，比如cls、classItem这类都可以。

2. 修正.map()回调的JSX返回语法 #

你的map回调里直接写了<div>one class</div>，如果是用大括号包裹的多行回调逻辑，需要显式用return返回JSX元素；如果想简化写法，也可以去掉大括号改用圆括号包裹JSX，实现隐式返回。

修正后的完整代码 #

renderClasses () {
  if (!this.state.classes.length) {
    console.log(this.state.userType)
    if (this.state.userType) {
      return (<div>Add Class</div>)
    } else {
      return (<div>Join Class</div>)
    }
  } else {
    // 替换参数名+显式return JSX
    return (
      <div>
        { this.state.classes.map((cls) => {
          return <div>one class</div>
        }) }
      </div>
    )
  }
}

render() {
  if (!this.state.isLogged) {
    return <Redirect to='/' />
  }
  return (
    <div>
      { this.renderClasses() }
    </div>
  );
}

可选的简化写法（隐式返回） #

如果你的map回调逻辑很简单，可以去掉大括号，用圆括号包裹JSX实现隐式返回，代码会更简洁：

return (
  <div>
    { this.state.classes.map((cls) => (
      <div>one class</div>
    )) }
  </div>
)

另外补充一个React的最佳实践：列表渲染的元素必须有唯一的key属性，所以最好给每个map出来的<div>加上key（比如用班级的唯一标识id）：

<div key={cls.id}>one class</div>

这样修改后，你的代码应该就能正常运行啦！

内容的提问来源于stack exchange，提问作者adv