Reactjs - Zugriff auf Variablen

Question

Wie kann ich auf Variable bvar im folgenden Code zugreifen? Auch wenn ich würde erklären Variablen wie:

a) Zustand

b) zwischen Konstruktor() und render()

c) innerhalb render() - mein Verständnis ist, dass ich sie einstellen würde Hier, wenn sich eine Variable ändern kann und ich sie jedes Mal einstellen möchte, wenn eine Komponente gerendert wird. Wenn ich also weiß, dass sich etwas überhaupt nicht ändert, wäre es eine Konstante und wo würde ich es einstellen?

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> 

    ); 
    } 
} 

Alle Variablen werden neben bvar angezeigt.

Bitte beraten.

Answer 1

bvar in Ihrem Konstruktor deklariert ist innen machen nicht zugänglich() -Methode. Es ist außerhalb des Geltungsbereichs. Wie von Caleb beantwortet, müßten Sie Instanzvariable verwenden: this.bvar = "cat"

Wann würde ich Variablen wie erklären:

a) Zustand

Nutzungszustand, wenn Änderungen in Daten sollten die Sicht beeinträchtigen (Speichern Sie z. B. den Standort des Benutzers im Status, damit die aktuelle Temperatur basierend auf diesem Standort ermittelt und gerendert werden kann). Außerdem kann state in der Logik verwendet werden, die in anderen Methoden Ihrer Komponente gefunden wird (z. B. Hintergrundbild basierend auf dem aktuellen Standort des Benutzers abrufen).

b) zwischen Konstruktor() und Render()

Variablen innerhalb anderer Methoden Ihrer Komponente deklariert werden häufig zum vorübergehenden Speichern kommenden Daten, zum Beispiel von dem Zustand, Requisiten, Eingabefelder verwendet usw. Diese Variablen sind nur innerhalb dieser Methoden zugänglich, z

constructor() { 
... 
} 

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

render() { 
... 
} 

c) im Inneren machen()

Variablen werden oft innerhalb deklariert render() zum vorübergehenden Speichern von Daten in Zustand oder Stützen gehalten. Auf diese Variablen kann nur innerhalb von render() zugegriffen werden, z.

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

Answer 2

bvar im Konstruktor definieren Sie es als erklären müssten this.bvar = "cat"