关于React中那些css不得不说的事儿

1.首先是样式引入，主要依赖的是babel的css-loader，这里是gitHub地址

很简单，只要在webpack.config.js中配置好

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,use: [ 'style-loader','css-loader' ]
      }
    ]
  }
}

然后只要在文件中引入

import css from 'file.css';

当然，也可以使用其他的方式来编写样式，比如less，sass等等，方法也大致相同

顺便给几个git上的地址，方便使用戳这里

2.另外再介绍一个方式，就是简单暴力一点，直接写在jsx的标签里面，就像这样

import React,{ Component } from 'react';

export default class MyApp extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div style={{marginTop: 10}}>

            </div>
        )
    }
}

当然，我们也可以定义一个变量，就像定义一个类一样，

import React,{ Component } from 'react';

export default class MyApp extends Component {

    constructor(props) {
        super(props)
    }

    render() {

        const styles = {
            padding: 0
        }

        return (
            <div style={{marginTop: 10}}>
                <div style={styles}>
                </div>
                <div style={styles}>
                </div>
            </div>
        )
    }
}

那么问题来了，如果个别样式不一样呢？接下来就可以这样

import React,{ Component } from 'react';

export default class MyApp extends Component {

    constructor(props) {
        super(props)
    }

    render() {

        const styles = {
            padding: 0
        }

        return (
            <div style={{marginTop: 10}}>
                <div style={Object.assign({},styles,{paddingTop: 10})}>
                </div>
                <div style={styles}>
                </div>
            </div>
        )
    }
}

这个Object.assign是干嘛的捏，可以理解成是类之间的继承，这样解释应该比较好理解

但是还有一个问题，因为这个方法比较新，所以并不是所有浏览器都支持的，比如说ios9以下的浏览器

那么这里就推荐一个类库---Ramda

这是一个类似lodash的数据处理类库，个人感觉还是比较好用的，遗憾的是暂时好像没有中文文档，但是先将就看一下吧，那么接下来我们就可以这样

import React,{ Component } from 'react';
import R from 'ramda';

export default class MyApp extends Component {

    constructor(props) {
        super(props)
    }

    render() {

        const styles = {
            padding: 0
        }

        return (
            <div style={{marginTop: 10}}>
                <div style={R.merge(styles,{paddingTop: 10})}>
                </div>
                <div style={styles}>
                </div>
            </div>
        )
    }
}

ok，这样就世界和平了,

React 中写css的方法还有很多，但是以上两种算是最常见的啦，嘿嘿

关于React中那些css不得不说的事儿

相关文章