react入门到进阶(三)

一、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,就可以搞定组件所有的jscss
  • 仍然是用css的写法,没有任何负担

顺便说一下,有时候你如果不太关注与美工,想要把主要精力全部集中于逻辑层的处理,但是你做的东西又不能太难看,所以你就需要一些样式框架,例如bootstrapant design之类的,可以直接加载它写好的样式。

上一篇:纯HTML+CSS带说明的黄色导航菜单


下一篇:C# (GDI+相关) 图像处理(各种旋转、改变大小、柔化、锐化、雾化、底片、浮雕、黑白、滤镜效果) (转)