Reactのコンポーネントとpropsについて
プログラミングの勉強日記
2020年6月21日 Progate Lv.140
ReactⅡ
コンポーネント
コンポーネントは部品やパーツという意味。Reactでは見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせてWebサイトの見た目を作る。今回はコンポーネントにLanguageという名前を付ける。
コンポーネントの構成
import React from 'react'; //Reactのインポート
//React.Componentを継承するLanguageクラスを作成(このクラスがコンポーネント)
class Language extends React.Component{
render(){ //renderメソッドを定義
return(
//JSX
);
}
}
コンポーネントの表示
LanguageコンポーネントをApp.jsに呼び出して表示させることで、Languageコンポーネントがブラウザに表示される。JSX内に<コンポーネント名 />
と書くことでコンポーネントを表示できる。コンポーネントは何度でも表示することが可能。
export default Language; //コンポーネントをexport
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=値
という形でコンポーネントを呼び出す箇所で渡す。
<Language
name='HTML&CSS'
image='https://~'
/>
render(){
console.log(this.props);
return( ... );
}
渡された値はthis.props
で取得できる。{props名:値}
というオブジェクトになる。
{
props:"HTML&CSS",
image:"https://~~"
}
propsの取得
this.props
と書くことで{props:値}
というオブジェクトを取得できるので、this.props.props名
とすることで、propsの値を取得できる。
<div className='language-name'>
{this.props.name)
</div>
<img className='language-image' src={this.props.image} />
mapメソッド
配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド。JSXをmapを用いて効率的に表示している。mapメソッドで配列の各要素に対して順番に処理を行い表示することができる。
const languageList=[
{name:'HTML&CSS', image:'https://~'}
];
...
<div>
{languageList.map((languageItem)=>{
return(
<Lanuage
name={languageItem.name}
image={languageItem.image}
/>
...
Author And Source
この問題について(Reactのコンポーネントとpropsについて), 我々は、より多くの情報をここで見つけました https://qiita.com/mzmz__02/items/8729b8f18423e0c2cee0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .