Reactjs - 访问变量 [英] Reactjs - accessing variables

问题描述

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

a) 状态

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

c) 在 render() 中 - 我的理解是，如果变量可以更改，我会在此处设置它们，并且我想在每次组件渲染时设置它.因此，如果我知道某些内容根本没有改变，那么它将是一个常量，我应该在哪里设置它?

import React, {Component} from 'react';导出默认类 App 扩展组件 {构造函数(道具){极好的();//设置初始网格this.state = {值:4，xsquares: 10,ysquares:10};var bvar = "猫";}使成为() {var avar = [氢"，氦"，锂"，铍"];让 cvar = "狗";返回 (//在此处添加您的组件标记和其他子组件引用.<div><h1>你好，世界！{this.state.value}<h2>{this.state.xsquares}</h2><h3>{avar[0]}</h3><h4>{this.bvar}</h4><h3>{cvar}</h3>

);}}

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

解决方案

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

<块引用>

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

a) 状态

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

<块引用>

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

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

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

<块引用>

c) 在 render() 内

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

class WelcomeScreen 扩展 React.Component {使成为() {var userName = this.props.userName;返回 (<div>你好，{用户名}！

);}}

How can I access variable bvar in the code below? Also, when would I declare variables as:

a) state

b) between constructor() and render()

c) inside render() - my understanding is that I'd set them here if a variable can change and I'd like to set it each time a component renders. So if I know something is not changing at all, it'd be a const and where would I set it?

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>

    );
  }
}

All variables display apart from bvar.

解决方案

bvar declared inside your constructor is not accessible inside render() method. It is out of scope. As answered by Caleb, you would need to use instance variable: this.bvar = "cat"

When would I declare variables as:

a) state

Use state if changes in data should affect the view (e.g. store user location in state so that current temperature can be established and rendered based on this location). Also, state can be used in the logic found in other methods of your component (e.g. fetch background image based on user's current location).

b) between constructor() and render()

Variables declared inside other methods of your component are often used to temporarily store data coming, for example, from the state, props, input fields etc. These variables are only accessible within those methods, e.g.

constructor() {
...
}

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

render() {
...
}

c) inside render()

Variables are often declared inside render() to temporarily store data held in state or props. These variables are only accessible inside render(), e.g.

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

这篇关于Reactjs - 访问变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！