照片和相簿的佈局其實很類似，差別只在 item 的外觀、間距、以及相簿文字而已，所以我們可以改造 Gallery component 讓它能吃二種設定。

App.js

import React from 'react';
import { AppBar, Layout } from 'react-toolbox';
import Gallery from './Gallery';
import Style from './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.data = props.data;
  }
  render() {
    return (
      <Layout>
        <AppBar />
        <div className={Style.content}>
          <Gallery items={this.data} type="album" />
        </div>
      </Layout>
    );
  }
}

export default App;

Gallery.js

import React from 'react';
import Style from './App.css';

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.type = props.type === 'album' ? '相簿' : '照片';
  }
  render() {
    const el = this.props.items.map(item => (
      <li key={item.id} className={Style.item}>
        <a href="#" style={{ backgroundImage: `url(${item.cover_photo.urls.thumb})` }}>
          {item.title}
        </a>
      </li>));
    return (
      <div className={Style.gallery}>
        <div>{this.type}</div>
        <ul className={Style['list-group']}>{el}</ul>;
      </div>
    );
  }
}

export default Gallery;