解決React報錯Style prop value must be an object

2022-12-03 14:00:55

總覽

在React中，當我們為元素的style 屬性傳遞字串時，會產生"Style prop value must be an object"警告。為了解決該警告，使用從屬性到值的對映。比如說，style={{paddingLeft: '15px'}} 。

這裡有個例子來展示錯誤是如何發生的。

// App.js
const App = () => {
  // ⛔️ Style prop value must be an object eslint(react/style-prop-object)
  return (
    <div>
      <h1 style="margin-left: 4rem">Hello world</h1>
    </div>
  );
};
export default App;

對映

上述程式碼的問題在於，我們為h1元素的style屬性傳遞了字串。相反，style屬性應該傳遞從屬性到值的對映。

const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: '4rem',
          fontSize: '20px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};
export default App;

需要注意的是，這裡我們使用了2對大括號。外側的大括號是對一個表示式的求值，內側的大括號是包含屬性名稱和值的物件。

你還可以使用邏輯來計算特定的值。

const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: 2 + 2 + 'rem',
          fontSize: Math.random() > 0.5 ? '20px' : '40px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};
export default App;

提取

你也可以將包含屬性和值的物件提取到一個變數中。

const App = () => {
  const h1Styles = {
    marginLeft: 2 + 2 + 'rem',
    fontSize: Math.random() > 0.5 ? '20px' : '40px',
    padding: '20px',
    backgroundColor: 'salmon',
    color: 'white',
  };
  return (
    <div>
      <h1 style={h1Styles}>Hello world</h1>
    </div>
  );
};
export default App;

需要注意的是，CSS屬性的命名必須是駝峰式。另一種方法是將你的CSS寫在一個以.css為擴充套件名的檔案中，並使用className屬性來為你的元素宣告樣式。

下面是我們如何將h1元素的樣式移到一個名為App.css的檔案中的一個類中。

.my-h1 {
  margin-left: 4rem;
  font-size: 20px;
  padding: 20px;
  background-color: salmon;
  color: white;
}

然後，我們可以匯入該css檔案，並使用my-h1類。

import './App.css';
const App = () => {
  return (
    <div>
      <h1 className="my-h1">Hello world</h1>
    </div>
  );
};
export default App;

這是對內聯樣式的一種替代。需要注意的是，這個屬性被稱為className而不是class。原因是：class是JavaScript中的一個保留詞。class關鍵字是用來宣告ES6類的。

以上就是解決React報錯Style prop value must be an object的詳細內容，更多關於React 報錯Style prop object的資料請關注it145.com其它相關文章！

解決React報錯Style prop value must be an object

目錄

總覽

對映

提取

熱門文章