variables - Reactjs - 访问变量

Question

如何访问下面代码中的变量 bvar？另外，我什么时候将变量声明为:

a) 状态

b) 在 constructor() 和 render() 之间

c) inside render() - 我的理解是，如果变量可以更改，我会在这里设置它们，并且我想在每次组件渲染时设置它。因此，如果我知道某些东西根本没有改变，那么它就是一个常量，我应该在哪里设置它？

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
    };

    var 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>

    );
  }
}

显示除 bvar 之外的所有变量。

Answer 1

在构造函数中声明的

bvar 在 render() 方法中无法访问。它超出了范围。正如 Caleb 的回答，您需要使用实例变量: this.bvar = "cat"

When would I declare variables as:

a) state

如果数据变化会影响 View ，则使用状态(例如，将用户位置存储在状态中，以便可以根据该位置建立和渲染当前温度)。此外，状态还可以用在组件其他方法中的逻辑中(例如，根据用户当前位置获取背景图像)。

b) between constructor() and render()

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

constructor() {
...
}

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

render() {
...
}

c) inside render()

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

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