如何為組件添加 CSS 的 class? 傳遞一個字元串作為 className 屬性: render() { return <span className="menu navigation-menu">Menu</span> } CSS 的 class 依賴組件的 props 或 state 的情 ...
如何為組件添加 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 通常比行內樣式更好。