Question

react中怎么设置在触发某个事件的时候组件发生样式的改变

Answer 1

React的组件式开发，让我们可以利用其ComponentModel，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loaderstyle-loaderextract-text-webpack-plugin。正在使用的方式我们理想中的文件结构可能会是这样的：-components-modal-modal.jsx-modal.css//可以是任意预处理器-dropdown-dropdown.jsx-dropdown.css然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（nameconvention）来曲线救国（这一点并不局限于react开发）。@modal-prefix:modal;.@{modal-prefix}{}.@{modal-prefix}-title{}类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做importReactfrom'react';import'./modal.less';exportdefaultReact.createClass({render(){returnHello;}});上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。CSSinJS之前看到过一个ppt：/css-modules/webpack-demo写在最后的话目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSSinJS，CSSModules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import，样式和组件都有了，不过仍需实践。