ReactJS - 靜態 defaultProps 屬性

---

---

React 是一個流行的使用者介面開發庫。有時在建立 React 應用時，我們可能希望為某些屬性設定預設設定。“defaultProps”的概念在這種情況下就派上用場了。

什麼是 defaultProps？

DefaultProps 是 React 的一個特性，允許我們為元件的屬性 (或 props) 提供預設值。當未提供 prop、prop 未定義或缺少 prop 時，將使用這些預設值。需要注意的是，如果 prop 顯式設定為 null，則不會應用 defaultProps。

defaultProps 的用法

class Button extends Component {
   static defaultProps = {
      color: 'blue'
   };
   
   render() {
      return <button className={this.props.color}>Click me</button>;
   }
}

在此程式碼中，我們有一個 Button 元件，它接受一個 'color' prop。如果未提供 'color' prop 或其未定義，defaultProps 會介入並預設將 'color' prop 設定為 'blue'。

defaultProps 實踐示例

如果沒有提供 'color' prop，Button 元件將預設設定為 'blue'。

<Button />
{/* The color is "blue" */}

即使我們將 'color' prop 直接設定為 undefined，defaultProps 仍然生效，將 'color' 的預設值設定為 'blue'。

<Button color={undefined} />
{/* The color is "blue" */}

如果我們將 'color' prop 更改為 null，defaultProps 不會覆蓋它，'color' 將為 null。

<Button color={null} />
{/* The color is null */}

如果我們為 'color' prop 提供一個值，則將使用該值而不是預設值。

<Button color="red" />
{/* The color is "red" */}

示例

示例 - Button 元件應用

我們將建立一個 React 應用，其中我們將顯示一個具有藍色顏色的按鈕元件，以展示 defaultProps 的用法。

現在開啟專案，並使用程式碼編輯器導航到專案目錄中的 src 資料夾。替換 App.js 檔案中的以下程式碼：

import React, { Component } from 'react';
import './App.css'; // Import the CSS file

class Button extends Component {
   static defaultProps = {
      color: 'blue'
   };   
   render() {
      return <button className={`button ${this.props.color}`}>Click me</button>;
   }
}
class App extends Component {
   render() {
      return (
         <div className="App">
            <Button />
         </div>
      );
   }
}

export default App;

App.css

.button {
   background-color: rgb(119, 163, 208);
   color: white;
   padding: 5px 20px;
   border: 2px;
   margin-top: 25px;
   border-radius: 5px;
   cursor: pointer;
}

.blue {
   background-color: blue;
}

輸出

示例 - 簡單計數器應用

在這個應用中，我們將顯示一個從指定初始值（預設為 0）開始的計數器。使用者可以點選一個按鈕來增加計數器。此應用將向我們展示如何使用靜態 defaultProps 為某些屬性提供預設值。此應用的程式碼如下：

import React, { Component } from 'react';

class Counter extends Component {
   static defaultProps = {
      initialValue: 0,
   };   
   constructor(props) {
      super(props);
      this.state = {
         count: this.props.initialValue,
      };
   }   
   increment = () => {
      this.setState((prevState) => ({ count: prevState.count + 1 }));
   };
   
   render() {
      return (
         <div>
            <h2>Counter App</h2>
            <p>Count: {this.state.count}</p>
            <button onClick={this.increment}>Increment</button>
         </div>
      );
   }
}

export default Counter;

輸出

示例 - 切換開關應用

在這個應用中，我們將提供一個可以開啟或關閉的切換開關。我們將初始狀態設定為開啟或關閉（預設為關閉）。使用者可以點選一個按鈕來切換開關。此應用的程式碼如下：

import React, { Component } from 'react';

class ToggleSwitch extends Component {
   static defaultProps = {
      defaultOn: false,
   };   
   constructor(props) {
      super(props);
      this.state = {
         isOn: this.props.defaultOn,
      };
   }   
   toggle = () => {
      this.setState((prevState) => ({ isOn: !prevState.isOn }));
   };
   
   render() {
      return (
         <div>
            <h2>Toggle Switch App</h2>
            <p>Switch is {this.state.isOn ? 'ON' : 'OFF'}</p>
            <button onClick={this.toggle}>Toggle</button>
         </div>
      );
   }
}

export default ToggleSwitch;

輸出

在上面的輸出中，我們可以看到有一個名為“Toggle”的按鈕，當我們點選它時，訊息將根據條件更改。如果訊息是“Switch is OFF”，那麼點選按鈕後，訊息將更改為“Switch is ON”。

總結

defaultProps 是 React 中一個有用的特性，它改進了對元件屬性預設值的處理。它確保即使缺少或未定義某些 props，我們的元件也能有效地工作。透過定義預設值，我們可以使程式碼更簡潔、更易於使用。