React 警告 Invalid DOM property for

前言

警告不影響使用，但影響美觀

來看看是哪兒出問題

// ⛔️ Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
      <input type="checkbox" id="menu"></input>
      <label for="menu" className="line">
        <div className="menu"></div>
      </label>

問題是使用 for 屬性將label標籤與input綁定，
但 for 是 JavaScript 中的保留字。

在React 中需要更換成 htmlFor 而不是for

<input type="checkbox" id="menu"></input>
<label htmlFor="menu" className="line">
  <div className="menu"></div>
</label>

我們必須在React 中使用 htmlFor 的原因是因為 for 關鍵字是一個保留字- 它用於for 循環。

這也是使用 className 屬性而不是 class 的原因。
class這個詞是保留的，因為它被用來聲明一個ES6 類。

References

Invalid DOM