Warum funktioniert meine for-Schleife nicht in meiner Klasse vor der Rendermethode in React?

Question

Ich finde hier mehrere Antworten, die sich mit diesem Problem befassen, weshalb ich meinen allgemeinen Ansatz gefunden habe. Aber wie die meisten Antworten sagen, fügen Sie das Code-Snippet:

var squares =[]; 

for(let i=1; i<10; i++){ 

    squares.push(<div className="square" key={i}></div>);  
} 

innerhalb der Klasse vor der Render-Methode. Aber es funktioniert nicht. Dann lege ich denselben Code außerhalb der Klasse ab und es funktioniert, aber jetzt habe ich keinen Zugriff auf den Statusbereich (wenn ich mich nicht irre). Ich bin auch verwirrt, warum mein Code-Editor mich nicht var wechseln lassen würde (innerhalb der Klasse).

Irgendwelche Ideen?

Danke.

Answer 1

Die meisten Antworten sagen, fügen Sie das Code-Snippet in der Klasse vor der Rendermethode ein. Aber es funktioniert nicht.

Diese Antworten bedeutete dies wahrscheinlich:

someMethod() { 
    var squares =[]; 

    for(let i=1; i<10; i++){ 
    squares.push(<div className="square" key={i}></div>);  
    } 
} 

render() { 
    return (
    // ... 
) 
} 

Während Sie dies wahrscheinlich tun sind:

var squares =[]; 

for(let i=1; i<10; i++){ 
    squares.push(<div className="square" key={i}></div>);  
} 

render() { 
    return (
    // ... 
) 
} 

Dann legte ich den gleichen Code außerhalb von der Klasse und es funktioniert, aber Jetzt habe ich keinen Zugriff auf den Statusbereich

Richtig, so sollte es sein.

Ich vermute auch, dass Sie diese auf dem Bildschirm angezeigt werden soll, in diesem Fall sollten Sie es auch zurück:

someMethod() { 
    var squares =[]; 

    for(let i=1; i<10; i++){ 
    squares.push(<div className="square" key={i}></div>);  
    } 
    return squares; 
} 

render() { 
    return (
    <div> 
    {this.someMethod()} 
    </div> 
) 
} 

Answer 2

Aber wie die meisten Antworten sagen, fügen Sie den Code-Schnipsel in der Klasse vor die Rendermethode. Kein

Sie würden nicht einfügen der for-Schleife direkt innerhalb der Klasse außerhalb des Verfahrens machen, sondern direkt im Inneren

render() { 
    var squares =[]; 
    for(let i=1; i<10; i++){ 
     squares.push(<div className="square" key={i}></div>);  
    } 
    return (
     <div>{squares}</div> 
    ) 
}