鍍金池/ 教程/ HTML/ 行內(nèi)樣式
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細說明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門
JSX 中的 If-Else
克隆組件
教程
更多的關于Refs
JSX 的 false 處理
高級性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡介
測試工具集
JSX 陷阱
工具集成(ToolingIntegration)
公開組件功能
通過 AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具(Immutability Helpers)
動態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽
復合組件
動畫
插件
JSX 展開屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫并行使用 React
鍵控的片段
標簽和屬性支持
組件間的通信
React (虛擬)DOM 術語
JSX 根節(jié)點的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標簽
為什么使用 React?
getInitialState 里的 Props 是一個反模式
與 DOM 的差異

行內(nèi)樣式

在 React 中,行內(nèi)樣式并不是以字符串的形式出現(xiàn),而是通過一個特定的樣式對象來指定。在這個對象中,key 值是用駝峰形式表示的樣式名,而其對應的值則是樣式值,通常來說這個值是個字符串(了解更多:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // 注意這里的首字母'W'是大寫
  msTransition: 'all' // 'ms'是唯一一個首字母需要小寫的瀏覽器前綴
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

樣式的 key 用駝峰形式表示,是為了方便與JS中通過DOM節(jié)點獲取樣式屬性的方式保持一致(比如 'node.style.backgroundImage')。另外瀏覽器前綴除了ms以外 首字母應該大寫。想必 WebkitTransition 的首字母是“W”就不難理解了。