Web全棧開發學習筆記—Part2 與服務端通訊—e.給React應用加點樣式

目錄

Improved error message

Inline styles

---

當前應用的外觀是相當樸素的。 

現在向 React 應用新增樣式。以傳統的方式將 CSS 放在一個單獨的檔案中來新增到我們的應用; 先不使用CSS preprocessor 。

在src 目錄下新增一個新的index.css 檔案，然後通過匯入index.js 檔案將其新增到應用中:

import './index.css'

讓我們在index.CSS 檔案中新增如下 CSS 規則:

h1 {
  color: green;
}

CSS 規則由選擇器 和宣告 組成。 選擇器定義規則應該應用於哪些元素。 上面的選擇器是h1，它將匹配我們應用中的所有h1 頭標記。宣告將 color 屬性設定為值green。

一個 CSS 規則可以包含任意數量的屬性。 將字型樣式定義為italic:

h1 {
  color: green;
  font-style: italic;}

不同型別的 CSS 選擇器有許多匹配元素的方法，參考 different types of CSS selectors。

針對每個便箋的風格可以使用選擇器li，因為所有便箋都包裝在li 標籤中:

const Note = ({ note, toggleImportance }) => {
  const label = note.important 
    ? 'make not important' 
    : 'make important';

  return (
    <li>
      {note.content} 
      <button onClick={toggleImportance}>{label}</button>
    </li>
  )
}

在樣式表中加入如下規則:

li {
  color: grey;
  padding-top: 3px;
  font-size: 15px;
}

 如果應用包含其他li 標籤，那麼同樣的樣式規則也應用於它們。

如果想把風格應用到特定的便箋上，可以使用類選擇器。

在HTML 中，class 被定義為class 屬性的值:

<li class="note">some text...</li>

在React中，使用className屬性而不是 class 屬性。 對Note 元件進行如下更改:

const Note = ({ note, toggleImportance }) => {
  const label = note.important 
    ? 'make not important' 
    : 'make important';

  return (
    <li className='note'>      {note.content} 
      <button onClick={toggleImportance}>{label}</button>
    </li>
  )
}

類選擇器使用. classname 語法定義:

.note {
  color: grey;
  padding-top: 5px;
  font-size: 15px;
}

現在嚮應用新增其他li 元素，它們將不會受到上述樣式規則的影響。

 

Improved error message

【改進錯誤資訊】

先前實現了當使用者試圖通過alert方法切換刪除便箋的重要性時，顯示錯誤訊息。 現在將錯誤訊息實現為它自己的 React 元件:

const Notification = ({ message }) => {
  if (message === null) {
    return null
  }

  return (
    <div className="error">
      {message}
    </div>
  )
}

如果 message prop 的值為 null，則不會向螢幕渲染任何內容，在其他情況下，訊息會在 div 元素中渲染。

在App 元件中新增一個名為errorMessage 的新狀態。 用一些錯誤資訊來初始化它，就可以立即測試元件:

const App = () => {
  const [notes, setNotes] = useState([]) 
  const [newNote, setNewNote] = useState('')
  const [showAll, setShowAll] = useState(true)
  const [errorMessage, setErrorMessage] = useState('some error happened...')
  // ...

  return (
    <div>
      <h1>Notes</h1>
      <Notification message={errorMessage} />      <div>
        <button onClick={() => setShowAll(!showAll)}>
          show {showAll ? 'important' : 'all' }
        </button>
      </div>      
      // ...
    </div>
  )
}

然後新增一個適合錯誤訊息的樣式規則:

.error {
  color: red;
  background: lightgrey;
  font-size: 20px;
  border-style: solid;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

現在新增顯示錯誤訊息的邏輯，更改 toggleImportanceOf 函式:

  const toggleImportanceOf = id => {
    const note = notes.find(n => n.id === id)
    const changedNote = { ...note, important: !note.important }

    noteService
      .update(changedNote).then(returnedNote => {
        setNotes(notes.map(note => note.id !== id ? note : returnedNote))
      })
      .catch(error => {
        setErrorMessage(
          `Note '${note.content}' was already removed from server`
        )
        setTimeout(() => {
          setErrorMessage(null)
        }, 5000)
        setNotes(notes.filter(n => n.id !== id))
      })
  }

當出現錯誤時，向 errorMessage 狀態新增一個錯誤描述訊息。 同時啟動一個計時器，它將在5秒後將 errorMessage狀態設定為null。

結果如下:

 

Inline styles

【內嵌樣式】

React也可以直接在程式碼中編寫樣式成為可能，即內聯樣式。

任何 React 元件或元素都可以通過style屬性為 JavaScript 物件提供一組 CSS 屬性。

CSS 規則在 JavaScript 中的定義與普通 CSS 檔案中的定義稍有不同。 假設我們想給一些元素綠色和斜體字型，大小為16畫素。 在 CSS 中，它看起來像這樣:

{
  color: green;
  font-style: italic;
  font-size: 16px;
}

但是React inline style 內建樣式物件看起來是這樣的:

 {
  color: 'green',
  fontStyle: 'italic',
  fontSize: 16
}

每個 CSS 屬性都被定義為 JavaScript 物件的一個獨立屬性。 畫素的數值可以簡單地定義為整數。 與常規 CSS 相比，一個主要的區別是連字元(kebab case)的 CSS 屬性是用 camelCase 編寫的。

接下來建立一個Footer 元件嚮應用新增一個“ bottom block” ，併為它定義如下行內樣式:

const Footer = () => {
  const footerStyle = {
    color: 'green',
    fontStyle: 'italic',
    fontSize: 16
  }
  return (
    <div style={footerStyle}>
      <br />
      <em>Note app, Department of Computer Science, University of Helsinki 2020</em>
    </div>
   )
}

const App = () => {
  // ...

  return (
    <div>
      <h1>Notes</h1>

      <Notification message={errorMessage} />

      // ...  

      <Footer />    </div>
  )
}

內聯樣式有一定的限制，如pseudo-classes不能直接使用。

內聯樣式和其他一些將樣式新增到 React 元件的方法完全違背了舊的慣例。 傳統上是將 CSS 與內容(HTML)和功能(JavaScript)解耦，即將 CSS、 HTML 和 JavaScript 編寫到它們各自的檔案中。

React是這個極端的對立面。 由於將 CSS、 HTML 和 JavaScript 分離成單獨的檔案在大型應用中不利於伸縮，所以 React 將應用按照其邏輯功能實體進行劃分。

構成應用功能實體的結構單元是 React 元件。 React 元件定義了組織內容的 HTML，確定功能的 JavaScript 函式，以及元件的樣式;。所有這些都放在一個地方。 這是為了建立儘可能獨立和可重用的單個元件。