react组件设置样式

发表于 | 分类于

本篇主要介绍给组件设置样式时，准确说是给JSX里的标签设置样式时要注意的地方。

class

当要给组件添加class时，不能直接写成class，应该写成className:

1
2
3
4
5
class Demo extends React.Component{
    render(){
        return <div className='div1'></div>
    }
}

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

style

除了通过添加class来设置样式外，我们也可以使用style内联样式。只不过这跟以往写的有些不同，你需要将样式内容用双花括号包起来，如下：

1
2
3
4
5
class Demo extends React.Component{
    render(){
        return <div style={{color:'white',fontSize:'16px'}}></div>
    }
}

这跟vue里的mustache语法很像，也是双大括号，但是这里应该理解为一层花括号里包含一个对象，react将这个对象渲染为内联样式。另外你需要注意的是，遇到font-size这种的要写成小驼峰命名形式，不然会出错。