Reactjs - 访问变量

Question

如何在下面的代码中访问变量bvar？另外,我何时将变量声明为:

一个状态

b)构造函数()和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"

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

一个状态

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

b)构造函数()和render()之间

里面的组件的其他方法声明的变量通常被用来临时存储数据的到来,例如,从国家,道具,输入字段等,这些变量只有那些方法,例如中访问

constructor() {
...
}

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

render() {
...
}

c)内部渲染()

变量通常在render()中声明,以临时存储状态或道具中保存的数据.这些变量只能在render()中访问,例如

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