脚本宝典收集整理的这篇文章主要介绍了React入门0x011: 样式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
0x000 概述
这一章讲react
中的样式
0x001 样式也可以是js
再声明一遍,在js
中,什么都是js
,样式也是,但是样式分为两种,内联样式和外联样式
-
内联样式:
内联样式可以写在标签的style
属性中
-
我们先尝试传统写法
import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component {
render() {
return <div style="background:red">
<p>hello react</p>
</div>
}
}
ReactDom.render(
<App></App>,
document.getElementById('app')
)
查看浏览器,会发现报错,因为style
期待的是一个像{background:'red'}
一样键值对对象
修改写法:
import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component {
render() {
return <div style={{
background: 'red'
}}>
<p>hello react</p>
</div>
}
}
ReactDom.render(
<App></App>,
document.getElementById('app')
)
查看浏览器,可以了
那为什么要两个{}
呢?其实不是两个大括弧,第一个大括弧代表这里边执行js
表达式,第二个括弧则代表对象,我们换一种写法就会更清晰一点了
class App extends React.Component {
constructor() {
super()
this.state = {
background: 'red'
}
}
render() {
return <div style={this.state}>
<p>hello react</p>
</div>
}
}
甚至还可以:
class App extends React.Component {
constructor() {
super()
}
createStyle(){
return{
background: 'red'
}
}
render() {
return <div style={this.createStyle()}>
<p>hello react</p>
</div>
}
}
ReactDom.render(
<App></App>,
document.getElementById('app')
)
记住咯,在react
中,什么都可以是js
,对于style
,我们只需要返回一个对象就行了,不论是直接返回一个对象,还是通过复杂的函数创建对象,或者是其他野路子,只要给style
一个对象就好了。当然这个对象的键值取值必须在css
的有效取值范围内才行,否则,浏览器可解析不了。
-
外链样式文件
外联样式文件可以将样式存储在独立的文件中
-
编写样式文件
// style.css
div {
background: red;
}
-
编写组件
// index.js
import React from 'react'
import ReactDom from 'react-dom'
import './style.css'
class App extends React.Component {
constructor() {
super()
}
render() {
return <div>
<p>hello react</p>
</div>
}
}
ReactDom.render(
<App></App>,
document.getElementById('app')
)
-
添加对css
的支持
$ npm install --save-dev css-loader style-loader
$ vim webpack.config.js
const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
open: true
},
module: {
rules: [
{
test: /.js$/,
loader: "babel-loader"
},
{
test: /.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html")
})
]
}
说明:外联样式的能力不是react
提供的,而是webpack
,webpack
可以将style.css
插入到文件中,从而渲染到react
最后生成的dom
上,可以查看浏览器:
0x003 总结
react
中都是js
,样式也是js
,所以react
中,样式也可以编程的,可以完全动态的方式生成样式,当然还是那句话:不受控制的自由将带来灾难,思想的自由才能铸就自我。
0x004 资源
以上是脚本宝典为你收集整理的React入门0x011: 样式全部内容,希望文章能够帮你解决React入门0x011: 样式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。