当前位置： 移动技术网 > IT编程>网页制作>CSS > React下style和class实例讲解

React下style和class实例讲解

2018年04月19日  | 移动技术网IT编程  | 我要评论

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.

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网