您的位置：首页 > Web前端 > React

react入门到进阶（三）

2017-12-07 21:26 253 查看

一、react样式

1、内联样式

在以前写

html+css

的时候，引入css的时候有一种方法就是内联，而在

react

中又有些不一样，样式是用变量的形式，如下

const styleComponentHeader ={
header: {
backgroundColor:'#333333',
color:'#ffffff',
'padding-top':'15px',
paddingBottom:'15px',
fontSize:'15px'
}
//还可以定义其他样式
}
<h1 style={styleComponentHeader.header}>yondu is a good father</h1>

我们用参照

json

的方式定义了一个样式，这个只能定义在
render
里面，然后直接使用它，当然

header

后面还可以继续定义其他样式，而且和

css

写法不同的是，名字要用驼峰命名法，或者你就用引号把名字包起来，而后面的值则必须要用引号包起来。这种方式最后呈现的状态是把样式直接写入了标签里面，这样定义的东西不会影响全局，只对自己负责不会污染其他的。

另一种方法是我们直接创立一个

css

文件，这种就直接像以前那种写法了,只不过你在标签里面加类名的时候，要用

className

，例如

<h1  className="smallFontSize">yondu is a good father</h1>

,这种方式由于是全局的，所以有时候容易造成污染，你都不知道怎么回事，样式就冲突了，慎用。

总结几点：

css命名规范模块__属性名字--样式设定

定义只能在

render

里面

注意样式的驼峰命名

类名要用

className

动画，伪类不能使用

react-native就是用这种方法

2、内联样式中的表达式

当我们有时候，想要动态的去改变样式的时候，会用到

js

，但在

react

中，我们也可以，这就要用到前面所提到的三元表达式了。

constructor(){
super();
this.state = {
miniH : false
};
}

changeHeader(){
this.setState({
miniH : !this.state.miniH
});
}

render(){
const styleHello = {
header: {
backgroundColor:'#333333',
color:'#ffffff',
paddingTop:(this.state.miniH) ? '3px' : '15px',
paddingBottom:(this.state.miniH) ? '3px' : '15px',
}
}
return(
<div>
<h1 style={styleHello.header} onClick={this.changeHeader.bind(this)} >hello world</h1>
<p>子页面输入<input type="text" onChange={this.props.childchange} /></p>
//当子组件输入框发生变化时，给在父组件的属性childchange传递了一个参数
</div>
)
}

我们首先给我们要改变的元素给了一个点击事件，这个事件只改变一个变量的布尔值，但是我们正是通过这个布尔值，就可以在样式里面使用三元表达式从而到达改变样式值的效果，而且这种改变，仅仅是

state

的改变，不会刷新整个页面，很高效。

3、CSS模块化

下面，我们来说说

react

样式里面极为重要的一点，就是css的模块化。为了保证一个模块的样式不影响其他模块，也就是不造成全局的污染，而且能使

css

按需加载的话，我们就要用到css的模块化。

首先，我们先装2个插件来处理模块化

"style-loader": "^0.13.1",
"css-loader": "^0.25.0"

然后在

webpack.config.js

文件里面配置一些东西，这是一种命名算法，会给你要引用这个

css

的类给予特殊的类名，这样就不会导致命名混乱的问题。

{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},

接着，我们创立一个

css

文件，随便命名为block.js吧，然后在里面写一些样式

.style {
background-color:#333333;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
fontSize:15px;
}

我们还要在需要这个

css

文件的

js

文件里面，把它引用进来

var blockCss = require("../../css/block.css");

这样，我们就可以直接使用这个

css

了

<p className={blockCss.style}>

这样使用，就可以确保你在

css

里面的东西不会污染全局，它只对引用自己的元素负责。而且，这样写的模块

css

是能够共享的，也省略了很多代码。下面，我们总结一下

css模块化

的东西

所有样式都是local 的，解决了命名冲突和全局污染

类名都是由算法生成的，可以来压缩类名

只需引用组件的

js

，就可以搞定组件所有的

js

和

css

仍然是用

css

的写法，没有任何负担

顺便说一下，有时候你如果不太关注与美工，想要把主要精力全部集中于逻辑层的处理，但是你做的东西又不能太难看，所以你就需要一些样式框架，例如

bootstrap

、

ant design

之类的，可以直接加载它写好的样式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航