ReactでES6のmapメソッドを使用してリストを作成する
HTMLリストをレンダリングするReactコンポーネントを作成してみます。
class Test extends React.Component {
render() {
const items = ['リンゴ', 'バナナ', 'アップル'];
return (
<ul>
{
items.map(e => {
return <li>{e}</li>
})
}
</ul>
)
}
}
<li>～</li>タグの個所を配列のmapメソッドとアロー関数を使用してレンダリングします。
リスト内容はpropsから渡すコンポーネントに修正する
TestというリストをレンダリングするReactコンポーネントを作成しましたが、肝心のリスト内容が固定になってしまっています。これだと汎用性がないので、propsを使用して属性として外部から渡してあげます。
以下のように書きなおします。
<div id="koko"></div>
<script type="text/babel">
class Test extends React.Component {
render() {
// const items = ['リンゴ', 'バナナ', 'アップル'];
const items = this.props.items.split(",");
return (
<ul>
{
items.map(e => {
return <li>{e}</li>
})
}
</ul>
)
}
}
ReactDOM.render(
<Test items="リンゴ,バナナ,アップル" />,
document.getElementById("koko")
)
</script>
この方がTestコンポーネントのitems属性に指定する値を変えることによってレンダリングされるリストの内容が変わるので良いかと思います。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント