解決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;
}
然后，我們可以導入該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àn)Vue的watch監(jiān)聽屬性
在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的，今天通過本文給大家講解React實現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了React 組件間的通信示例，主要通信劃分為三種，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
很多小伙伴反饋React ant 點擊導航條閃爍,沒有傳遞具體的參數(shù)給點擊事件 , 導致在函數(shù)內(nèi)部無法準確判斷要展示哪個子菜單,可能導致頁面狀態(tài)的短暫變化,出現(xiàn)閃爍效果,下面給大家分享解決方法,感興趣的的朋友跟隨小編一起看看吧2024-04-04
詳解react、redux、react-redux之間的關(guān)系
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
詳解如何使用React Hooks請求數(shù)據(jù)并渲染
這篇文章主要介紹了如何使用React Hooks請求數(shù)據(jù)并渲染，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
最近使用react做個滾動監(jiān)聽獲取更多數(shù)據(jù)效果,當想獲取dom時發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報錯解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下2022-08-08
Redux 是React最常用的集中狀態(tài)管理工具,本文主要介紹了React狀態(tài)管理的簡明指南,具有一定的參考價值,感興趣的可以了解一下2024-01-01
React報錯之Parameter event implicitly has a
這篇文章主要為大家介紹了React報錯之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07