Components

製作網頁的過程中，畫面的切板跟排版總是特別頭痛

就算一個畫面能手刻出來，但如果遇到三百頁的畫面不可能都能完美的複製貼上完成

設計重複使用的元件，就是本篇的重點

這樣做除了能夠提升開發速度之外，重複使用 + 高維護性 也是很重要的

圖片來源

開工

以按鈕來說，很多網站都會有一些按鈕，登入/篩選等等用的按鈕

按鈕如果可以重複出現，也就是，

我只要畫一次設計稿，剩下的方式就是影印再加上一點塗改就好了 (奇怪比喻)

動動手

可以開一個資料夾管理所有的 UI

以按鈕為例子，我們建立一個共同按鈕樣式

其中會有紅色與藍色的外觀，預設為藍色

Button.js

import "./CSS.css"

const Button = props => {
  return
  ;<button className={props.color || "blue"}>{props.children}</button>
}

export default Button

現在你只要在別的地方引用，填入特定顏色就會變色了

不用在重新引入 CSS 或是手動加上每個 className

import Button from "./UI/Button.js"

const SomeSection = () => {
  return (
    <div>
      <Button color="red">First Button</Button>
      <Button>Second Button</Button>
      <Button color="red">Third Button</Button>
      <Button>Fourth Button</Button>
      <Button color="red">More Button</Button>
    </div>
  )
}

import Button from "./UI/Button.js"

const AnotherSection = () => {
  return (
    <div>
      <p>Check please</p>
      <Button color="red">Check</Button>
    </div>
  )
}

當元件更大一點時

以我仿製的Uber eats為例子

上一下拆解圖，除了透過 wireframe 去切除排版的樣子，同時也可以審視重複性

請看左方的篩選區

FilterForm.js
重複的共用元件，透過傳入的 props 來判斷要渲染哪一個元件

其中回傳內容也有的 Button 也是共用元件之一，後面就太長省略

import Button from "../UI/Button"

const FilterForm = props => {
  return (
    <React.Fragment>
      {props.types === "radio" && (<Button>...略 )}
      {props.types === "priceRange" && (<Button>...略 )}
      {props.types === "dietLimit" && (<Button>...略 )}
    </React.Fragment>
  )
}

Filter.js

只要引入 FilterForm 並填上對應的 type，就能夠簡化這一區塊，提升維護性

若哪一個部分有問題，就到對應的地方去查看

const Filter = () => {
  return (
    <div className={classes.contain}>
      <div className={classes.stick}>
        <h4 className={classes.title}>所有餐廳門市</h4>
        <div>
          <FilterForm types="radio" />
          <FilterForm types="priceRange" />
          <FilterForm types="dietLimit" />
        </div>
      </div>
    </div>
  )
}

元件的細緻程度還得要看專案的情況與規劃，但如果不用一直做重複的事情，不是很好嗎(?

相關的程式碼內容，較雜請斟酌參考

08/15