React中在Div块内显示按钮报错：Parsing error: Unexpected keyword 'this'

错误原因 #

你的代码存在两个语法问题：

• 条件判断外层多了一对大括号：JSX中表达式只需要一层{}包裹，你写成了{{this.state.selectedTag}}，内层的{}会被解析为对象字面量，导致this出现位置错误。
• 三元运算符缺少else分支：三元运算符要求必须同时提供condition ? 真值表达式 : 假值表达式，不能省略假值部分。

修正后的代码 #

<div>
  {this.state.selectedTag ? 
    <button onClick={() => { this.resetTagState() }}>Reset</button> 
    : null}
</div>

补充说明 #

• 如果不需要假值分支，直接返回null即可，React会忽略null、undefined这类值，不渲染任何内容。
• 也可以用逻辑与运算符简化写法（适合只需要真值分支的场景）：

<div>
  {this.state.selectedTag && 
    <button onClick={() => { this.resetTagState() }}>Reset</button>}
</div>

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