在 React 中應用內聯樣式

1. React 中的內聯樣式
2. React 條件內聯樣式

設計 HTML 元素或元件的樣式是前端開發人員工作的核心。樣式對於確保 HTML 元素的正確放置和外觀至關重要。React 開發人員使用許多不同的方法來應用樣式。最流行的方法之一是使用內聯樣式。在今天的文章中，我們想討論使用內聯樣式的優點和缺點。

React 中的內聯樣式

React 開發人員通常有一種首選的方式來設計他們的元件。有些為每個元件建立單獨的 CSS 檔案，而有些則將所有樣式合併到一個檔案中。在一個檔案中為整個應用程式編寫樣式時，你更有可能用完類的描述性（和唯一）名稱。

內聯樣式定義允許你設定元件樣式，而無需為 JavaScript 和 CSS 建立兩個單獨的檔案。以這種方式定義的樣式比全域性 CSS 規則更具可讀性，並且在使用它們時，你不太可能遇到命名問題。

語法

如果你在 HTML 中使用過內聯樣式，那麼 React 中的內聯樣式會按照你期望的方式工作。就像在 HTML 中一樣，React 中的內聯樣式是使用 style 屬性設定的。此外，與 HTML 類似，內聯樣式也會覆蓋 React 中的類。

現在，讓我們談談差異。要在 JSX 中設定元件或元素的樣式，你必須提供一個表示樣式的物件（或對物件的引用）。為了確保 JSX 可以破譯你的樣式物件，你必須將它放在一對花括號內。下面是一個簡單的內聯樣式宣告的樣子：

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

在這個例子中，大括號的外層確保其中的物件被評估為 JavaScript 表示式。

在語法方面，React 與 HTML 中的內聯樣式之間的最大區別可能是你不能在 React 內聯樣式中使用常規 CSS 屬性名稱。僅由一個片語成的屬性通常是相同的，但由多個片語成的屬性通常組合為一個詞並以 camelCase 形式書寫。例如，font-size 屬性在 React 樣式中變為 fontSize。

本質上，React 中的內聯樣式表示為一個物件，鍵值對對應於 CSS 屬性及其值。逗號必須分隔鍵值對；否則，你可能會收到錯誤訊息。

React 條件內聯樣式

你的 JSX 程式碼可以包含可以編譯為有效樣式的 JavaScript 物件。這是一個非常有用的功能，因為它允許我們有條件地應用樣式。我們可以在花括號內使用 JavaScript 三元運算子來設定複雜的條件來描述應該應用樣式的例項。

假設我們的網站有一個深色主題和一個淺色主題。我們可以使用元件 state 物件中的 dark 屬性在兩個主題之間有條件地切換。這是一個例子。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

以上是對內聯樣式的有用性的簡單演示。

在上面的程式碼片段中，你可能已經注意到我們的樣式物件太長並且難以理解。我們可以在其他地方定義它並引用它，而不是將整個物件寫在花括號內。當你注意到內聯樣式物件包含太多規則時，請將其移到 JSX 之外。你可以建立一個具有描述性名稱的變數來儲存樣式物件並使用變數名稱來引用它。這樣，你的樣式更易於閱讀。這是一個例子。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

這樣，return 語句下的 JSX 程式碼更易於閱讀並且看起來更簡潔。

一些 React 開發人員喜歡內聯樣式，因為它們易於閱讀，並且它們的範圍僅限於單個元件而不是全域性定義。處理元件的人員可以輕鬆瞭解元件的樣式。

但是，在某些情況下 CSS 仍然有用。例如，它有:hover 和許多其他 JavaScript 沒有的選擇器。