反応コンストラクタで変数を定義できませんでした

Question

私は反応が新しくなりました。コンストラクタの状態をレンダリングメソッドに渡そうとしましたが、私のh1は表示されません。

class Mod extends React.Component { 

    constructor(props) { 
     super(); 
     this.state = { 
      title : 'Hello world' 
     }; 
     //this worked! 
     document.title = this.state.title; 
    } 

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

Answer 1

それはcomponentDidMountで

class Mod extends React.Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      title : 'Hello world' 
     }; 
    } 

    componentDidMount() { 
     document.title = this.state.title; 
    } 

    render() { 
     return(
      <div> 
       <h1>{this.state.title}</h1> 
      </div> 
     ) 
    } 
} 

変更文書のタイトルをする必要があります - それはコンポーネントの準備ができてと表示されているとき、それが実行されますを意味します。

ブラウザがない場合（たとえば、node.jsサーバー側のレンダリングを使用してWebサイトをレンダリングする場合など）、ブラウザに関連するアクションをコンストラクタで実行しないでください。 componentDidMountは、ブラウザ（およびdocument）が利用可能な場合にのみ呼び出されます。

また、this.titleの代わりにthis.state.titleを使用する必要があります。 thisは反応コンポーネントインスタンスに関連し、this.stateはコンストラクタで設定した状態に関連しています。

Answer 2

理由はあなたが状態でobjectと状態を扱います、そしてあなたが内部で定義したすべての変数がキー値になり、それらにアクセスするためにあなたはこれを使用する必要があります：this.state.variable_name、使用この：document.title='name'が働いている理由

class Mod extends React.Component { 

    constructor(props) { 
     super(); 
     this.state = { 
      title : 'Hello world' 
     }; 

    } 

    render() { 
     return(
      <div> 
       <h1>{this.state.title}</h1> 
      </div> 
     ) 
    } 
} 

理由は、グローバル変数として定義している、とあなたがdocument.titleことにより、任意の場所に直接それらにアクセスすることができ、あります。

Doc:

Documentオブジェクトです。グローバルオブジェクトdocumentは、現在のブラウザウィンドウに表示されている というHTMLドキュメントを表します。 ウェブブラウザにはJavaScriptエンジンが搭載されています。そのエンジンは、documentとwindowなどの実行時オブジェクトを開発者に の開発者に提供します。