変数の内部でのレンダリング機能の使用

Question

私はリアクションを学んでいて、間違いなく、コンポーネントのレンダリングメソッドで使用される変数が別の場所で宣言されているコードが2つあります。 't。

import React from 'react'; 
import ReactDOM from 'reactDOM'; 

const myVar = 'hello'; 

class myComponent extends React.Component { 
    render() { 
     return <h1>{myVar}</h1>; 
    } 
} 

ReactDOM(
    <myComponent />, 
    document.getElementById('app') 
); 

これは、レンダリング方法でグローバル変数にアクセスできることを意味します。

しかし、私は、誰かがあなたが変数を定義していないクラスの内部で、この動作

Answer 1

を説明することができ、ここで混乱しています

import React from 'react'; 
import ReactDOM from 'reactDOM'; 

class myComponent extends React.Component { 
    const myVar = 'hello'; 

    render() { 
     return <h1>{this.myVar}</h1>; 
    } 
} 

ReactDOM(
    <myComponent />, 
    document.getElementById('app') 
); 

動作しないこのケースを取ります。あなたはちょうど彼らがオブジェクトリテラルに登場しているかのように同じ属性が割り当てられているクラス定義で指定されmyVar='hello'ないconst myVar='hello'

プロパティを記述する必要があります。