解決 React 組件的 defaultProps 錯誤：轉移到 JavaScript 默認參數

當你的 React 應用出現錯誤提示：”Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.”，這意味著你需要更新你的代碼以適應 React 的未來版本。這篇文章旨在為遇到相同錯誤的開發者提供一個清晰的解決方案。

為什麼 console 出現 error defaultProps ?

在 React 的未來主要版本更新中，defaultProps 的支持將被移除，開發者被鼓勵改用 JavaScript 的默認參數來設置函數組件的預設屬性。這種變更旨在提升代碼的可讀性和維護性。

例如，對於一個簡單的文本組件，你可能之前這樣寫：

function Text({ fontSize }) {
  return <p style={{ fontSize }}>Some text</p>;
}

Text.defaultProps = {
  fontSize: "20px"
};

解決方法

你應該採用新的預設寫法，現在將上面的code 換成新寫法，如下：

const Text = ({ fontSize = "20px" }) => {
  return <p style={{ fontSize }}>Some text</p>;
};

這種方法不僅讓代碼更加精簡，也降低了出錯的可能性。這種直接在組件函數的參數中設定默認值的做法，使得默認設定易於追蹤和維護。這種改變適用斯所有類型的 React 組件，無論是類組件還是函數組件。