React-classnames库
来源:互联网 发布:python网页编程 编辑:程序博客网 时间:2024/06/08 20:16
React原生动态添加多个className会报错:
- 1
- 2
- 3
- 1
- 2
- 3
想要得到最终渲染的效果是:
- 1
- 1
引入classnames库,安装:
- 1
- 1
使用:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以将后面的true省略,但这种我认为是比较直观的,可以对传入的class进行比较明显的动态判断
其他用法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
也可以传入数组对象:
- 1
- 2
- 1
- 2
可以传入动态class
- 1
- 2
- 1
- 2
在react中可以直接在classname内部传入动态class并进行条件判断,
不适用classnames时的书写方式:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
使用了之后可以简化:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
更多功能参考 github:https://github.com/JedWatson/classnames
转载:http://blog.csdn.net/duola8789/article/details/71514450
阅读全文
0 0
- React-classnames库
- React-classnames库
- React-classnames库
- React-classnames库的使用
- react classnames
- zepto classnames
- node之classnames模块
- Launch screens may not set custom classnames问题
- React 组件/库集合:Awesome React Components
- React-周边类库
- 推荐React组件库
- react组件库
- React
- react
- React
- REACT
- React
- react
- 《Spring AOP学习总结之四—AOP实现读写分离》
- Qt定义了的进程错误代码
- docker 提示image operating system "linux" cannot be used on this platform
- C++笔记之regex-正则匹配
- vue生命周期
- React-classnames库
- 借助百度云中的百度人脸识别用java开发一个人脸识别
- 携程内推面试
- centos 7 下 安装nginx
- 简单介绍个人认为百度搜索引擎习惯的分享
- Apache类库之BeanUtils(一)-学习报告
- Android如何避免OOM总结
- js只保留整数,向上取整,四舍五入,向下取整等函数
- 新开ubuntu的必要优化