2018-07-25 有得有失--在React中使用classNames

由于React中css模块化的原因,原先写页面时简单的css :onhover 变得需要js来操控监听事件,动态添加classname的需求自然就会出来,

简单的监听可以用className的三目运算符来实现。

但是当状态管理趋向复杂。就需要classNames的第三方依赖,结合前面的animate.css和模板字符串。最终实现方式如图


2018-07-25 有得有失--在React中使用classNames_第1张图片

引入classnames库

import classnames from 'classnames'   注意!此处classnames的值跟后面的对象名要保持一致。

然后在classnames的用法中,给值为true则说明使用,为flase则不可使用。此处拓展后可动态控制添加,结合状态管理之后(state或者redux等)

然后这边图中用了模板字符串,加上数组,因为没有模板字符串的话显示会有点问题,结合css模块化。

图中的实现方式应该是较为合理的方案了。



相关文献参考:react中使用classname



实现完整点击动态添加animatecss效果后的案例代码参考

2018-07-25 有得有失--在React中使用classNames_第2张图片

你可能感兴趣的:(2018-07-25 有得有失--在React中使用classNames)