React Native组件render条件渲染报错：保留字/意外令牌问题咨询

让我一步步帮你拆解这三个场景的差异，搞清楚每个问题的根源：

1. 为什么直接写 {this.state.showForm && <AddContactForm />} 会提示“this是保留字”？ #

在类组件的render方法里，this是完全合法的引用，正常情况下不会触发这个报错。大概率是你写这段代码时的上下文语法出错：

• 比如是不是把这个表达式放在了JSX的外部？
• 或者不小心把它嵌套在了一个未绑定this的普通函数里？

正确的写法应该是把这段逻辑放在render返回的JSX插值中，示例：

render() {
  return (
    <div className="app-container">
      {/* 这里的this属于类组件上下文，完全合法 */}
      {this.state.showForm && <AddContactForm addContact={this.addContact} />}
    </div>
  );
}

如果还是报错，可以检查下Babel/React编译配置，或者有没有拼写错误。

2. 为什么改用变量后返回 { showForm && <AddContactForm /> } 会报意外令牌？ #

问题出在return({ ... })的写法上！你混淆了JSX的包裹括号和对象字面量的括号：

• React中，render返回多行JSX时，我们用圆括号()包裹，目的是让JS引擎识别这是一个连续的JSX表达式，而非语句块。
• 但你用了大括号{}，这会被JS引擎解析为对象字面量，而showForm && <AddContactForm />是一个布尔/组件表达式，不是对象要求的key: value键值对，自然会触发语法错误。

正确的写法应该把大括号换成圆括号，或者单行直接返回：

render() {
  const showForm = this.state.showForm;
  // 用圆括号包裹JSX表达式
  return (
    showForm && <AddContactForm addContact={this.addContact} />
  );
  // 单行写法：return showForm && <AddContactForm addContact={this.addContact} />;
}

3. 为什么多条件的 {this.state.show && this.state.selectedIndex === 2 && <ContactsList />} 能正常运行？ #

因为这段代码是写在JSX的插值表达式（也就是{}内部），这是React官方推荐的条件渲染方式：

• JSX中的{}允许嵌入任意合法的JavaScript表达式，逻辑与&&的短路特性刚好适用：当所有条件都为true时，最后一个表达式（也就是<ContactsList />）会被渲染；如果前面有任何一个条件为false，整个表达式会返回false，React会自动忽略这个值（相当于渲染null）。
• 这个写法完全符合JSX的语法规则，所以不会报错。

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