Reactのコンポーネントとpropsについて

プログラミングの勉強日記

2020年6月21日　Progate Lv.140
ReactⅡ

コンポーネント

　コンポーネントは部品やパーツという意味。Reactでは見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせてWebサイトの見た目を作る。今回はコンポーネントにLanguageという名前を付ける。

コンポーネントの構成

Language.js

import React from 'react'; //Reactのインポート
//React.Componentを継承するLanguageクラスを作成（このクラスがコンポーネント）
class Language extends React.Component{ 
  render(){  //renderメソッドを定義
    return(
      //JSX
    );
  }
}

コンポーネントの表示

　LanguageコンポーネントをApp.jsに呼び出して表示させることで、Languageコンポーネントがブラウザに表示される。JSX内に<コンポーネント名 />と書くことでコンポーネントを表示できる。コンポーネントは何度でも表示することが可能。

Language.js

export default Language; //コンポーネントをexport

App.js

import React from 'react'; 
import Language from './Language'; //コンポーネントをインポート
class Language extends React.Component{ 
  render(){ 
    return(
      <div>
        <h1>言語一覧<h1>
        <Language /> 
    );
  }
}

props

　App.jsから各言語の名前と画像のデータをLanguageコンポーネントに渡すことで言語ごとに表示を変えることができる。App.jsから渡すこのデータをpropsという。props=値という形でコンポーネントを呼び出す箇所で渡す。

App.js

<Language
  name='HTML&CSS'
  image='https://~'
/>

Language.js

render(){
  console.log(this.props);
  return( ... );
}

　渡された値はthis.propsで取得できる。{props名:値}というオブジェクトになる。

コンソール

{
  props:"HTML&CSS",
  image:"https://~~"
}

propsの取得

　this.propsと書くことで{props:値}というオブジェクトを取得できるので、this.props.props名とすることで、propsの値を取得できる。

Language.js

<div className='language-name'>
  {this.props.name)
</div>
<img className='language-image' src={this.props.image} />

mapメソッド

　配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド。JSXをmapを用いて効率的に表示している。mapメソッドで配列の各要素に対して順番に処理を行い表示することができる。

App.js

const languageList=[
  {name:'HTML&CSS', image:'https://~'}
];
...
<div>
  {languageList.map((languageItem)=>{
  return(
    <Lanuage
      name={languageItem.name}
      image={languageItem.image}
    />
  ...