style
属性之外,还有HTML内联样式的其他几种语法差异。首先,某些CSS样式属性的名称使用驼峰大小写。例如,最后一个挑战使用fontSize
而不是font-size
设置font-size
。像font-size
这样的连字符是JavaScript对象属性的无效语法,因此React使用驼峰大小写。通常,任何带连字符的样式属性都是使用JSX中的camel case编写的。除非另有说明,否则假定所有属性值长度单位(如height
, width
和fontSize
)均为px
。例如,如果要使用em
,则将值和单位用引号括起来,如{fontSize: "4em"}
。除了默认为px
的长度值之外,所有其他属性值都应该用引号括起来。 object
分配给常量以保持代码的有序性。取消注释styles
常量并声明具有三个样式属性及其值的object
。给div
一个颜色为"purple"
,字体大小为40
,边框为"2px solid purple"
。然后将style
属性设置为等于styles
常量。 styles
变量应该是具有三个属性的object
。
testString: 'assert(Object.keys(styles).length === 3, "The styles
variable should be an object
with three properties.");'
- text: styles
变量的color
属性应设置为purple
的值。
testString: 'assert(styles.color === "purple", "The styles
variable should have a color
property set to a value of purple
.");'
- text: styles
变量应该将fontSize
属性设置为值40
。
testString: 'assert(styles.fontSize === 40, "The styles
variable should have a fontSize
property set to a value of 40
.");'
- text: styles
变量应该将border
属性设置为2px solid purple
的值。
testString: 'assert(styles.border === "2px solid purple", "The styles
variable should have a border
property set to a value of 2px solid purple
.");'
- text: 该组件应呈现div
元素。
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div
element.");'
- text: div
元素的样式应该由styles
对象定义。
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The div
element should have its styles defined by the styles
object.");'
```