解決React報錯Style prop value must be an object
總覽
在React中，當我們?yōu)樵氐?code>style 屬性傳遞字符串時，會產(chǎn)生"Style prop value must be an object"警告。為了解決該警告，使用從屬性到值的映射。比如說，style={{paddingLeft: '15px'}} 。
這里有個例子來展示錯誤是如何發(fā)生的。
// 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;
映射
上述代碼的問題在于，我們?yōu)?code>h1元素的style屬性傳遞了字符串。相反，style屬性應(yīng)該傳遞從屬性到值的映射。
const App = () => {
return (
<div>
<h1
style={{
marginLeft: '4rem',
fontSize: '20px',
padding: '20px',
backgroundColor: 'salmon',
color: 'white',
}}
>
Hello world
</h1>
</div>
);
};
export default App;
需要注意的是，這里我們使用了2對大括號。外側(cè)的大括號是對一個表達式的求值，內(nèi)側(cè)的大括號是包含屬性名稱和值的對象。
你還可以使用邏輯來計算特定的值。
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屬性來為你的元素聲明樣式。
下面是我們?nèi)绾螌?code>h1元素的樣式移到一個名為App.css的文件中的一個類中。
.my-h1 {
margin-left: 4rem;
font-size: 20px;
padding: 20px;
background-color: salmon;
color: white;
}
然后，我們可以導(dǎo)入該css文件，并使用my-h1類。
import './App.css';
const App = () => {
return (
<div>
<h1 className="my-h1">Hello world</h1>
</div>
);
};
export default App;
這是對內(nèi)聯(lián)樣式的一種替代。需要注意的是，這個屬性被稱為className而不是class。原因是：class是JavaScript中的一個保留詞。class關(guān)鍵字是用來聲明ES6類的。
以上就是解決React報錯Style prop value must be an object的詳細內(nèi)容，更多關(guān)于React 報錯Style prop object的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中，有哪些場景的組件協(xié)同？又如何去實現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09
關(guān)于React16.0的componentDidCatch方法解讀
這篇文章主要介紹了關(guān)于React16.0的componentDidCatch方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
react-router-dom v6版本跳轉(zhuǎn)路徑的實現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react-native 實現(xiàn)購物車滑動刪除效果的示例代碼
這篇文章主要介紹了react-native 實現(xiàn)購物車滑動刪除效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
解決React報錯React.Children.only expected to rece
這篇文章主要為大家介紹了React報錯React.Children.only expected to receive single React element child分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了React?useRef原理的深入理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
詳解React開發(fā)中使用require.ensure()按需加載ES6組件
本篇文章主要介紹了詳解React開發(fā)中使用require.ensure()按需加載ES6組件，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了React實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06