React入门0x011: 样式

0x000 概述

这一章讲react中的样式

0x001 样式也可以是js

再声明一遍，在js中，什么都是js，样式也是，但是样式分为两种，内联样式和外联样式

1. 内联样式：

   内联样式可以写在标签的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的有效取值范围内才行，否则，浏览器可解析不了。

2. 外链样式文件

   外联样式文件可以将样式存储在独立的文件中

   • 编写样式文件

     // 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
• 源码