这篇文章主要介绍了在react中如何使用样式，css模块化以及数据的双向绑定。

1.在react中使用内联样式

  • 在cmtItem.jsx中导入并使用样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React from "react";
    import style from '@/coms/style'

    function CmtItem(props){
        return <div style={style.myStyle}>
            <h2 style={style.myH2}>评论人：{props.user}</h2>
            <p>评论内容：{props.content}</p>
        </div>
    }
    export default CmtItem

  • 在style.js中定义样式对象

    1
    2
    3
    4
    export default {
        myStyle: {border: '1px dashed #ddd', margin: '20px', padding: '10px'},
        myH2: {fontSize: '14px', fontWeight: 'bold', marginBottom: '8px'}
    }

2.css模块化

  • 在webpack配置文件中css-loader后面添加?modules

    1
    2
     { test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] },
    // modules后面的第二个参数是自定义生成类名格式

  • 应用：

    1
    2
    3
    4
    5
    6
    // 注意css模块化只对class和id选择器有效，而不会将标签选择器模块化
    import css from '@/css/cmt.css'
    <h2 className={css.tit}>评论列表</h2>
    // 如果css用连字符那么要用以下方式调用
    <h2 className={css['j-tit']}>评论列表</h2>
    <div id={css.content}>内容内容内容内容</div>

  • 使用localIdentName自定义生成的类名格式，可选的参数有：

    • [path] 表示样式表 相对于项目根目录 所在路径
    • [name] 表示 样式表文件名称
    • [local] 表示样式的类名定义名称
    • [hash:length] 表示32位的hash值
    • 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }

  • 使用 :local() 和 :global()

    • :local()包裹的类名，是被模块化的类名，只能通过className={cssObj.类名}`来使用

      同时，:local默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；

    • :global()包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名className="类名"

    1
    2
    3
    // 以下两种方法效果相同，tit是模块化的类名，myclass是全局类名
    <div className={[css.tit, 'myclass'].join()}></div>
    <div className={css.tit + ' myclass'}></div>

  • css模块化问题

    1
    2
    3
    // 如果对所有的css文件启用模块化那么当使用第三方css库时使用很麻烦，为解决问题我们可以使用less或者scss作为自己的模块化类库，对css文件不在模块化。
    { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    { test: /\.less/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'less-loader'] },

3.react中绑定事件

  • 事件名称都是react提供的，名称首字母必须大写，比如：onClick，onMouseOver等

  • 为事件提供处理函数必须按照以下格式：

    1
    onClick = {function}

  • 最常用的事件绑定行为

    1
    2
    3
    4
    <button onClick = { ()=> this.show('参数') }></button>
    show = (arg) => {
        console.log('接收到的参数：' + arg)
    }

  • 在React中，如果想要修改 state 中的数据，推荐使用 this.setState({ })

4.文本框数据绑定

在vue中使用 v-model 实现数据的双向绑定，在React中默认是单向数据流，也就是只把state中的数据绑定到页面上，无法把页面上数据的变动同步到state中，要做到双向数据同步需要手动监听onChange事件，拿到数据后手动调用 this.setState({ })修改回去。

  • 在React中使用 ref 获取DOM元素的引用

    • vue 为页面上的元素提供了 ref 的属性，如果想要获取 元素引用，则需要使用this.$refs.引用名称

      在 React 中，也有 ref, 如果要获取元素的引用this.refs.引用名称

  • demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // a. 使用 ref 获取DOM元素引用
    <input type="text" value={ this.state.msg } onChange={ () => this.txtChanged() } ref='txt'/>
    txtChanged = () => {
        this.setState({
            msg: this.refs.txt.value
        })
    }

    // b. 使用事件参数 e 来获取（每当触发一个事件都有一个事件参数e）
    <input type="text" value={ this.state.msg } onChange={ (e) => this.txtChanged(e) }/>
    txtChanged = (e) => {
        this.setState({
            msg: this.e.target.value
        })
    }