如何為組件添加 CSS 的 class？
傳遞一個字串作為 className 屬性：
render() {
return <span className="menu navigation-menu">Menu</span>
}
CSS 的 class 依賴組件的 props 或 state 的情況很常見：
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}
style(行內樣式 inline-style) 規范
注意：
在檔案中，部分例子為了方便，直接使用了 style，但是通常不推薦將 style 屬性作為設定元素樣式的主要方式，在多數情況下，應使用 className 屬性來參考外部 CSS 樣式表中定義的 class，style 在 React 應用中多用于在渲染程序中添加動態計算的樣式，
style 接受一個采用小駝峰命名屬性的 JavaScript 物件，而不是 CSS 字串，這與 DOM 中 style 的 JavaScript 屬性是一致的，同時會更高效的，且能預防跨站腳本（XSS）的安全漏洞，例如：
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
注意：樣式不會自動補齊前綴，如需支持舊版瀏覽器，請手動補充對應的樣式屬性：
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition() {
return <div style={divStyle}>This should work cross-browser</div>;
}
Style 中的 key 采用小駝峰命名是為了與 JS 訪問 DOM 節點的屬性保持一致（例如：node.style.backgroundImage ），瀏覽器引擎前綴都應以大寫字母開頭，除了 ms，因此，WebkitTransition 首字母為 ”W”，
React 會自動添加 ”px” 后綴到行內樣式為數字的屬性后，如需使用 ”px” 以外的單位，請將此值設為數字與所需單位組成的字串，例如：
// Result style: '10px'
<div style={{ height: 10 }}>
Hello World!
</div>
// Result style: '10%'
<div style={{ height: '10%' }}>
Hello World!
</div>
但并非所有樣式屬性都轉換為像素字串，有些樣式屬性是沒有單位的(例如 zoom，order，flex)，無單位屬性的完整串列在此處，
行內樣式不好嗎？
從性能角度來說，CSS 的 class 通常比行內樣式更好，
參考文獻
- React 官網：樣式與 CSS
- React 官網：DOM 元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549347.html
標籤：其他
上一篇：開發輕量級REST API樣板 基于Node.js、MongoDB 通過Mongoose驅動
下一篇：前端設計模式——MVC模式