iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

Zero to hero with React.js系列 第 26

【Day 26 React】Redux 做遊戲角色陣容應用程式——完結篇

上一篇建立完角色陣容後,今天要來做已選取的角色陣容。
component 資料夾中新增 HeroList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class HeroList extends Component {
  render(){
    return(
      <div>
        <h4> Your Hero Squad</h4>
        <ul className="list-group">
          {this.props.heroes.map(hero => {
            return (
              <li key={ hero.id } className="list-group-item">
                <div className="list-item">
                  { hero.name }
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

接著要撰寫 map props 的邏輯並把它 export

function mapStateToProps(state){
  return {
    heroes: state.heroes
  }
}

export default connect(mapStateToProps, null)(HeroList);

回到我們的 parent component App.js,先把 HeroList 引入

import HeroList from './HeroList';

遇到蟲蟲卡死
持續更新中。。。。


上一篇
【Day 25 React】Redux 做遊戲角色陣容應用程式——趴ㄈ ㄞˋ
下一篇
【Day 27 React】Redux+API 製作 meme generator—— Part1
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言