React報(bào)錯(cuò)Style?prop?value?must?be?an?object如何解決

本篇內(nèi)容介紹了“React報(bào)錯(cuò)Style prop value must be an object如何解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

總覽

在React中，當(dāng)我們?yōu)樵氐?code>style 屬性傳遞字符串時(shí)，會(huì)產(chǎn)生"Style prop value must be an object"警告。為了解決該警告，使用從屬性到值的映射。比如說(shuō)，style={{paddingLeft: '15px'}} 。

這里有個(gè)例子來(lái)展示錯(cuò)誤是如何發(fā)生的。

// App.js
const App = () => {
  // ?? Style prop value must be an object eslint(react/style-prop-object)
  return (
    <div>
      <h2 >Hello world</h2>
    </div>
  );
};
export default App;

映射

上述代碼的問(wèn)題在于，我們?yōu)?code>h2元素的style屬性傳遞了字符串。相反，style屬性應(yīng)該傳遞從屬性到值的映射。

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

需要注意的是，這里我們使用了2對(duì)大括號(hào)。外側(cè)的大括號(hào)是對(duì)一個(gè)表達(dá)式的求值，內(nèi)側(cè)的大括號(hào)是包含屬性名稱和值的對(duì)象。

你還可以使用邏輯來(lái)計(jì)算特定的值。

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

提取

你也可以將包含屬性和值的對(duì)象提取到一個(gè)變量中。

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

需要注意的是，CSS屬性的命名必須是駝峰式。另一種方法是將你的CSS寫在一個(gè)以.css為擴(kuò)展名的文件中，并使用className屬性來(lái)為你的元素聲明樣式。

下面是我們?nèi)绾螌?code>h2元素的樣式移到一個(gè)名為App.css的文件中的一個(gè)類中。

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

然后，我們可以導(dǎo)入該css文件，并使用my-h2類。

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

這是對(duì)內(nèi)聯(lián)樣式的一種替代。需要注意的是，這個(gè)屬性被稱為className而不是class。原因是：class是JavaScript中的一個(gè)保留詞。class關(guān)鍵字是用來(lái)聲明ES6類的。

“React報(bào)錯(cuò)Style prop value must be an object如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！