Question

如何在下面的代码中访问变量bvar？此外，我何时将变量声明为：

a）状态

b）构造函数（）和render（）

之间

c）在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",
      "Beryllium"
    ];

    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"

我什么时候将变量声明为：
a）状态

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

b）构造函数（）和render（）
之间

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

constructor() {
...
}

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

render() {
...
}

c）在render（）
中

变量通常在render（）中声明，以临时存储状态或道具中保存的数据。这些变量只能在render（）中访问，例如

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

Answer 2

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

Answer 3

    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",
      "Beryllium"
    ];

    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>

    );
  }
}

Reactjs - 访问变量

3 个答案: