react容易遇到的问题: JSX行内样式处理

格式:

<dom元素 style={ {css属性1：'值1',css属性2：'值2'} }></dom元素>

此写法也是JSX的一个特殊点,本来JSX的大括号解析不允许出现对象,但style行内样式是允许的.

示例写法:

// 行内样式
<h1 style={ {color: 'red', width: 200, backgroundColor: 'black'} }>
  我是黑底红字的h1
</h1>

首先,其内部的短横线写法要改为小驼峰写法;其次,JSX的行内样式不支持margin/padding等的快速写法,必须要marginTop: '2px', marginBottom: '2px'分开写,不能margin: '2px 0'这种写法.

总结要点:

1. 为啥有两个{{ }}

   外层的{}表示 要开始写js了;内层的{}表示是一个对象

2. 属性名是小驼峰格式 (background-color ===> backgroundColor)

3. 属性值是字符串, 如果单位是px，可以简写数值

4. margin/padding等属性不可简写