React类组件条件渲染JSX报错：Unexpected token问题咨询

你遇到的这个错误是JavaScript类语法的限制导致的，和React本身无关——在ES6类的主体里，只能定义构造函数、方法、访问器或者类属性（需要特定Babel插件支持的写法），不能直接用let/const这类变量声明语句放在类的顶层作用域里，这就是VS Code提示"Unexpected token. A constructor, method, accessor, or property was expected."的原因。

最直接的解决方案：把变量声明移到render()方法内部 #

既然你本来就是要在render()里使用这个变量，直接把逻辑挪到render方法里就行，代码修改后如下：

class App extends React.Component {
  // 你的state定义、其他方法...
  
  render() {
    // 把persons的声明和赋值移到render方法内部
    let persons = null; 
    if (this.state.showPerson) { 
      persons = ( 
        <div> 
          <RenderPerson name={this.state.customers[0].name} age={this.state.customers[0].age} /> 
          <RenderPerson name={this.state.agents[1].name} age={this.state.agents[1].age} /> 
        </div> 
      ); 
    }

    return (
      <div className="App">
        {/* 在这里使用persons变量 */}
        {persons}
        {/* 其他JSX内容 */}
      </div>
    );
  }
}

可选优化：用三元表达式简化条件渲染（无需额外变量） #

如果逻辑不复杂，也可以直接在JSX里用三元表达式实现条件渲染，省去中间变量：

class App extends React.Component {
  // ...
  
  render() {
    return (
      <div className="App">
        {this.state.showPerson ? (
          <div> 
            <RenderPerson name={this.state.customers[0].name} age={this.state.customers[0].age} /> 
            <RenderPerson name={this.state.agents[1].name} age={this.state.agents[1].age} /> 
          </div>
        ) : null}
        {/* 其他内容 */}
      </div>
    );
  }
}

另一种方案：使用类属性（需Babel支持） #

如果你项目配置了支持类属性的Babel插件（比如@babel/plugin-proposal-class-properties），也可以把变量改成类实例属性的写法，但这种方式更适合需要在多个方法中复用的变量，对于只在render里用的场景，还是第一种方案更合适：

class App extends React.Component {
  // 类属性写法，需要Babel支持
  persons = null;

  render() {
    if (this.state.showPerson) { 
      this.persons = ( 
        <div> 
          <RenderPerson name={this.state.customers[0].name} age={this.state.customers[0].age} /> 
          <RenderPerson name={this.state.agents[1].name} age={this.state.agents[1].age} /> 
        </div> 
      ); 
    } else {
      this.persons = null;
    }

    return (
      <div className="App">
        {this.persons}
      </div>
    );
  }
}

总结一下，最稳妥且符合常规写法的就是第一种：把局部变量的声明和赋值放到render()方法内部，完全适配标准ES6类语法，不需要额外配置。

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