bvar在你的构造函数中声明在 render() 方法中是不可访问的。它超出了范围。正如 Caleb 所回答的，您需要使用实例变量：this.bvar = "cat"

我什么时候将变量声明为：

一个状态

如果数据更改会影响视图，则使用状态（例如，将用户位置存储在状态中，以便可以基于此位置建立和呈现当前温度）。此外，状态可用于组件其他方法的逻辑中（例如，根据用户的当前位置获取背景图像）。

b) 在构造函数() 和渲染() 之间

在组件的其他方法中声明的变量通常用于临时存储来自状态、props、输入字段等的数据。这些变量只能在这些方法中访问，例如

constructor() {
...
}

onInputText() {
    var accountNumber = this.refs.inputField.value;
    this.props.handleInputText(accountNumber);
}

render() {
...
}

c) 内部渲染()

变量通常在 render() 中声明，以临时存储 state 或 props 中保存的数据。这些变量只能在 render() 内部访问，例如

class WelcomeScreen extends React.Component {
    render() {
        var userName = this.props.userName;
        return (
            <div>
                Hello, { userName }!
            </div>
        );
    }
}

要在构造函数中定义 bvar，您需要将其声明为 this.bvar = "cat"

    import React, {Component} from 'react';

export default class App extends Component {
  constructor(props) {
    super();
    // Set the initial grid in
    this.state = {
      value: 4,
      xsquares: 10,
      ysquares: 10
    };

    this.bvar = "cat";
  }
  render() {
    var avar = [
      "Hydrogen",
      "Helium",
      "Lithium",
      "Beryl­lium"
    ];

    let cvar = "dog";

    return (
      // Add your component markup and other subcomponent references here.
      <div>
        <h1>Hello, World! {this.state.value}</h1>
        <h2>{this.state.xsquares}</h2>
        <h3>{avar[0]}</h3>
        <h4>{this.bvar}</h4>
        <h3>{cvar}</h3>
      </div>

    );
  }
}