04、react之 JSX中使用樣式
阿新 • • 發佈：2019-02-14
1、JSX中使用樣式
1、行內樣式：寫行內樣式的時候需要使用兩個{} ==>{{}}
2、物件樣式：在return前面定義一個樣式物件，注意樣式的寫法，與HTML的不同點
3、CSS樣式（最常用）
注意事項，在HTML5中與在React中的樣式的書寫區別：
1、HTML5中以;結束
在React中以,結束
2、在HTML5中屬性與值都不需要加上引號
在React中，屬於javascript物件，key中不能存在 - ,需要使用駝峰命名，如果是value值，需要加上引號
3、在HTML中，設定帶數字的值，寬度，高度==，需要帶上單位
1、行內樣式：寫行內樣式的時候需要使用兩個{} ==>{{}}
2、物件樣式：在return前面定義一個樣式物件，注意樣式的寫法，與HTML的不同點
3、CSS樣式（最常用）
注意事項，在HTML5中與在React中的樣式的書寫區別：
1、HTML5中以;結束
在React中以,結束
2、在HTML5中屬性與值都不需要加上引號
在React中，屬於javascript物件，key中不能存在 - ,需要使用駝峰命名，如果是value值，需要加上引號
3、在HTML中，設定帶數字的值，寬度，高度==，需要帶上單位
在React中可以不用帶單位，直接寫數字 這裡是指那些規定了預設單位的值。比如說畫素px，如果要使用em或者是rem則需要加上單位
其他注意事項：
{} 插值符號 (例如寫行內style樣式的時候為啥要用{{}})
在使用插值符號的時候，裡面需要時一個物件或者是一個表示式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>在JSX語法中設定樣式</title> <style> .details { color: blueviolet; font-size: 20px; } </style> <script src="js/react.min.js"></script> <script src="js/react-dom.min.js"></script> <script src="js/browser.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> /* {} 插值符號 在使用插值符號的時候，裡面需要時一個物件或者是一個表示式 */ var HelloWorld = React.createClass({ render:function(){ var styles = { color: 'blue', fontSize: '30' } return ( <div className="box"> <h3 className="title" style={{color:'red',backgroundColor:'lime'}}>預設標題</h3> <p className="subtitle" style={styles}>說明</p> <p className="details">這個是用來教學的案例</p> </div> ) } }) ReactDOM.render(<HelloWorld/>,document.getElementById("app")) </script> </body> </html>