【今日のQ&A】render内のthisは何の指定？【React】

こんにちは、@codeship_techです。

今回はJavaScriptのライブラリReact.jsで出てくるthisという指定についての質問です。

render内で使われるthisという文字列ですが、jqueryだとthisは複数あるセレクタの中から、ひとつを選択する時に使われています。
何が違うのでしょう？

Reactで使われている、renderやrenderの中で使われているthisは何を表していますか？

render関数はReact.Componentから継承したクラスでは必須のメソッドで、ここで定義されたコードが最終的に表示されます。

class App extends React.Component {
   render() {
      return (
     <div>
       Appコンポーネント
     </div>
        )
   }
}

もし何も表示しない場合は、renderメソッドでfalseやnullなどを返します。

class App extends React.Component {
   render() {
           return false
   }
}

thisは定義したクラスを指していて、renderメソッド内でthisを使う場合は下記のようにします。

Appコンポーネントでhelloメソッドなどを作って、renderメソッド内で表示させたい場合です。

class App extends React.Component {

  hello() {
        return (
     <div>
       Appコンポーネントのhelloメソッド
     </div>
        )
}
   render() {
      return (
     <div>
       {this.hello()}
     </div>
        )
   }
}

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。