20190219

[iamsiutw]

日期: 2019/2/19 TUE

目標: 4/30

關於程式

想像你是一位圖書館管理員，今天被指派一項任務要把書架上的書列成清單，還沒學會 React 裡的 lists 觀念的你可能會這麼做：

...

state = {
    books: [
    { title: 'The Great Gatsby', author: 'Fitzgerald' },
    { title: 'The Old Man and the Sea', author: 'Hemingway' },
    { title: 'Cien años de soledad', author: 'Márquez' },
    ]
}

render() {

    books = (
        <div>
            <Book 
            title={this.state.books[0].title}
            author={this.state.books[0].author} />
            <Book 
            title={this.state.books[1].title}
            author={this.state.books[1].author} />
            <Book 
            title={this.state.books[2].title}
            author={this.state.books[2].author} />
        </div>
    )

    return (
        <div className="list">
            {books}
        </div>
    )
}

...

這個任務難度似乎並不高，很快就完成了。但是今天如果有 300 本書要整理該怎麼辦呢，總不能一本一本慢慢列吧？這時候就是 lists 出場的時候了。

因為 React 是純 JavaScript 的 library 之故，因此並無類似 Angular 的 ngFor 語法能用，因此我們必須使用 JavaScript 陣列裡的 map() 方法來達成目的。

上述的程式碼可以改寫為如下：

state = {
    books: [
    { title: 'The Great Gatsby', author: 'Fitzgerald' },
    { title: 'The Old Man and the Sea', author: 'Hemingway' },
    { title: 'Cien años de soledad', author: 'Márquez' },
    ]
}

render() {

    books = (
      <div>
        {this.state.books.map( book => {
          return (
            <Book 
              title={book.title}
              author={book.author} 
            />
          );
        })}            
      </div>
    )

    return (
      <div className="list">
        {books}
      </div>
    )
}

利用map()方法就能輕鬆地把渲染出陣列裡的所有資料囉。

隨筆

從胡立的筆記推薦中文文案排版指北，看了才發現原來書寫文章時有這麼多細節可以注意。

標點符號用全型是我已經習慣的用法，但中文和英文間增加空格這倒是真的沒有留意到，是時候該養成這項習慣。

今年元宵節燈會在屏東東港舉辦，主燈也和往年以生肖為主造型不同，改用魚為主體，稍微看了一下點燈儀式，整體的感覺真的不錯，相信故鄉今年的元宵燈會一定能圓滿成功。

謝謝詠萱晚餐準備元宵湯圓，非常美味<3

[aszx87410]

補充一下，在用 map 渲染東西的時候都會搭配 key 來使用，詳情可參考：https://reactjs.org/docs/lists-and-keys.html