React下style和class实例讲解

20、style 写法

JSX里，写 style 属性，有几点需要注意：

以 k-v （对象）形式来写 style 属性（如果直接写在 html 标签里，容易以为是双大括号，事实上还是单大括号）； key 使用驼峰写法； 值是字符串； 如果想混合多个属性，需要先通过例如 Object.assign() 将其混合为一个对象，再使用。 不能 使用数组或写 2 个 style={} 来实现；

示例代码：

class StyleDemo extends React.Component {
    render() {
        let style = {
            fontSize: '100px',
            color: 'red'
        }
        return <p style={style}>
            这是一段红色文字
        </p>
    }
}

21、class 写法

有几点注意：

写在标签里的时候，不是 class = "xxx"， 而是 className = "xxx"； 值是字符串，自行拼空格；

示例代码：

class StyleDemo extends React.Component {
    render() {
        let myClass = 'abc def'
        return <p className={myClass}>
            这是一段红色文字
        </p>
    }
}

原因：

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

例如，class 变成了 className，而 tabindex 则对应着 tabIndex.