如何科学的组织React组件样式

React的组件式开发,让我们可以利用其Component Model,专注于单个组件的逻辑开发,其中还包括组织组件的样式。先声明,本文并不是webpack配置教程,不会介绍详细的配置过程,假设你们已经用过了css-loader style-loader extract-text-webpack-plugin

正在使用的方式

我们理想中的文件结构可能会是这样的:

- components- modal- modal.jsx- modal.css  // 可以是任意预处理器- dropdown- dropdown.jsx- dropdown.css

然而,js现在可以做模块化,css并不行,所有css的定义都可以被视为全局变量,在css被打包后,一个组件的样式有可能会影响到其他组件,于是我们可以通过命名约定(name convention)来曲线救国(这一点并不局限于react开发)。

@modal-prefix: modal;.@{modal-prefix} {
}.@{modal-prefix}-title {
}

类似于上面的使用less的方式,在文件顶部先定义个类的前缀,来尽量避免命名冲突的可能。于是在组件中就可以这样做

import React from 'react';
import './modal.less';export default React.createClass({render () {return <div className="modal-title">Hello</div>;}
});

上面就是我现在在用的方式,利用命名约定做到了伪模块化(其实即便不是在使用react开发项目,也会用类似的方式)。

CSS in JS

之前看到过一个ppt:https://speakerdeck.com/vjeux/react-css-in-js,谈到了类似的问题。

一个方向是把样式也直接写进组件里,即使用inline style。首先,直接用传统的inline style并不可取,它对属性的支持有限,比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言,在react中倒是还行:将需要重用的样式对象作为模块导出即可。

其实大家很努力地希望CSS in JS可以实现,比如:

react-style

github地址

它的局限就是上面提到过的属性支持的问题,没有细究这个东西,不太喜欢。

local scoped CSS

https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope

用这个东西现在是webpack官方支持的,已在css-loader中实现,可以真正让你的css代码作为本地声明,类似的代码:

// style.css
:local(.title) { background: red; }

在需要这份样式的组件里引入这个模块:

import styles from 'style.css'<div className={styles.title}></div>

首先css的语法中是不支持这个:local()的,我们先看看页面最终的代码:

<div class="_3dpOqNNJl6oyjYpdDHCFD9" data-reactid=".0.2.1">Info</div>

到这里应该明白了,其实这也算是个预处理器,它将:local(.title)的类名变成了一个哈希值,仅可以通过模块导入的方式来获取这个哈希值并应用到组件上(生成的类名是可以配置的)。现在css-loader可以通过添加module选项(详细内容可以参考上面CSS Modules的链接)使得css默认定义的是local scoped的,希望共享的可以用:global()定义。

也可以和预处理器混用:

:global {.global-class-name {color: green;}
}

目前看下来,它只对class名做哈希,也就是说:

:local(.title span) // .[hash] span

然而

:local(.title .name) // .[hash0] .[hash1]

这个算是一个有意思的方式,首先它依赖于webpack,而webpack并不局限于React的开发,任何前端项目都可以使用webpack,那么就也都可以使用CSS Modules的概念,不知道这个CSS Modules会有怎么样的发展,感觉可以尝试。

这里是一个使用样例:https://github.com/css-modules/webpack-demo

写在最后的话

目前的探索结果暂时是这样,之后可能会继续来填坑。反正现在应该不会去用CSS in JS,CSS Modules可以一试,因为css-loader这个插件基本react的项目里都会使用,写好的组件一个import, 样式和组件都有了,不过仍需实践。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#语法糖系列 —— 第三篇:聊聊闭包的底层玩法

有朋友好奇为什么将 闭包 归于语法糖&#xff0c;这里简单声明下&#xff0c;C# 中的所有闭包最终都会归结于 类 和 方法&#xff0c;为什么这么说&#xff0c;因为 C# 的基因就已经决定了&#xff0c;如果大家了解 CLR 的话应该知道&#xff0c; C#中的类最终都会用 MethodTab…

空间数据库Spatial Tools的使用

工具下载:http://www.sharpgis.net/page/SQL-Server-2008-Spatial-Tools 该工具为绿色版,点击即可使用。 1、导入Shapefile数据 双击“Shape2Sql.exe”,打开界面如下: 2、查询空间数据 双击打开“SqlSpatial.exe”

IBM与博世合作打造轻松的工业物联网

计算业巨头c公司和物联网技术提供商博世集团&#xff08;Bosch Group&#xff09;宣布达成合作&#xff0c;让客户的开发和运营团队更轻松地管理物联网设备。 作为合作的一部分&#xff0c;博世将在IBM Bluemix云计算服务中提供Bosch物联网套件&#xff0c;并与IBM Watson物联网…

自定义View 进度条

1.在values下面新建一个attrs.xml&#xff0c;现在里面定义我们的自定义属性&#xff0c; <?xml version"1.0" encoding"utf-8"?> <resources><declare-styleable name"RoundProgressBar"><attr name"roundColor&qu…

python图形绘制库turtle中文开发文档及示例大全【最详细、连结果图都有,gif格式的!】

前言 本文参考&#xff1a;Python库官方文档 本文例子摘抄自Python库官方文档&#xff0c;为了方便讲解&#xff0c;个人进行了修改&#xff0c;并且相关函数说明不完全参照文档&#xff0c;在结果处贴出了执行结果&#xff0c;不方便用jpg等图片作为展示的用了gif格式图片进行…

剑指offer之和为s的数组

1 问题 输入一个递增排序数组和数字和s,在数组里面找2个数&#xff0c;他们的和是s,如果有多对&#xff0c;只需要输出一对。 比如数组{1, 2, 4, 7, 11, 15}&#xff0c;我们输出4 &#xff0c;11 2 思路 我们定义2个首尾指针&#xff0c;先是115&#xff0c;大于15&#xff…

oracle 事务_从Oracle到PG-PostgreSQL的MVCC机制简介

作者&#xff1a;甘植恳-AkenPostgreSQL和Oracle、MySQL等RDBMS一样&#xff0c;都有自己的并发控制机制。而并发控制的目的是为了在多个事务同时运行时保持事务ACID属性。MVCC即Multi-version concurrence control首字母缩写&#xff0c;MVCC会为每个数据更改操作创建数据块或…

【Microstation】不能从对话框中装载/创建类型为 ‘HTML‘,id =41510001 的对话框条目,该对话框为: “文本编辑器 - 字处理器“,GCSDIALOG 已装载。

在Win7上安装MicroStation V8i简体中文版,在添加文字图层的时候,点击出现提示“不能从对话框中装载/创建类型为 HTML,id =41510001 的对话框条目,该对话框为: "文本编辑器 - 字处理器",GCSDIALOG 已装载。”,问题出在Win7对该软件的兼容性上。 MS软件提供了三种…

fastdfs 一个group内实现按照不同的项目,指定路径存储.

为什么80%的码农都做不了架构师&#xff1f;>>> 环境介绍: 1: 公司目前有5个项目 A B C D E 日后可能会有所增加. 2: 使用fastdfs存储这5各项目的文件,要求各各项目的文件分开存储,也就是每个项目的文件存储到一个固定的位置. 3: 三台机器ip地址分配如下 tracker…

一个WPF开发的打印对话框-PrintDialogX

今天五月一号&#xff0c;大家玩的开心哦。1. 介绍今天介绍一个WPF开发的打印对话框开源项目-PrintDialogX[1]&#xff0c;该开源项目由《WPF开源项目&#xff1a;AIStudio.Wpf.AClient》[2]作者推荐。欢迎使用 PrintDialogX, 这是一个开源项目。免费用于商业用途。用于 C# 的自…

这一新的可视化方法教你优雅地探索相关性

一个古老的诅咒一直萦绕着数据分析&#xff1a;我们用来改进模型的变量越多&#xff0c;那么我们需要的数据就会出现指数级的增长。不过&#xff0c;我们通过关注重要的变量就可以避免欠拟合以及降低收集大量数据的需求。减少输入变量的一种方法是鉴别其对输出变量的影响。变量…

cannot fetch plan for SQL_ID: 5qgz1p0cut7mx, CHILD_NUMBER: 0

SQL>set serveroutput off --一定要关SQL> select * from table(dbms_xplan.display_cursor(null,null,ADVANCED));PLAN_TABLE_OUTPUT--------------------------------------------------------------------------------------------------------------------------…

【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文

前言 本片博文主要面向于还没接触过web开发的萌新&#xff0c;以及想知道整体流程并且完成建站的萌新&#xff1b;如果你是个大佬&#xff0c;就没必要看下去了。 本篇博文没有难啃的骨头&#xff0c;请各位萌新放心食用。 本篇博文采用通俗易懂的方式讲解&#xff0c;轻松并…

剑指offer之剪绳子问题

1 问题 给你一根长度为n的绳子&#xff0c;请把绳子剪成m段 (m和n都是整数&#xff0c;n>1并且m>1)每段绳子的长度记为k[0],k[1],…,k[m]. 请问k[0] * k[1] …k[m]可能的最大乘积是多少&#xff1f; 例如&#xff0c;当绳子的长度为8时&#xff0c;我们把它剪成长度分别…

计算机打字比赛活动策划书怎么写,打字比赛策划书范文.docx

打字比赛策划书范文第 PAGE \* Arabic \* MERGEFORMAT 7 页打字比赛策划书范文打字比赛策划书(一)一、比赛简介&#xff1a;为了丰富大学生的课余生活&#xff0c;提高学生动手能力和综合素质&#xff0c;本协会面对全体协会成员开展此项打字比赛活动。此项活动为我协会电脑培训…

okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...

之前上传图片都是直接将图片转化为io流传给服务器&#xff0c;没有用框架传图片。最近做项目&#xff0c;打算换个方法上传图片。Android发展到现在&#xff0c;Okhttp显得越来越重要&#xff0c;所以&#xff0c;这次我选择用Okhttp上传图片。Okhttp目前已经更新到Okhttp3版本…

MicroStation V8i简体中文版中文字体乱码解决办法

Bentley (奔特力)是一家软件研发公司,其核心业务是满足负责建造和管理全球基础设施,包括公路、桥梁、机场、摩天大楼、工业厂房和电厂以及公用事业网络等领域专业人士的需求。Bentley 在基础设施资产的整个生命周期内针对不同的职业,包括工程师、建筑师、规划师、承包商、…

剑指offer之斐波那契数列

1 问题 写一个函数&#xff0c;输入n,求斐波那契数列的第n项。斐波那契数列定义如下。 f(n) 0; (n 0)f(n) 1; (n 1)f(n) f(n - 1) f(n - 2); (n > 2); 2 分析 1) 直接用递归 2) 我们用两个变量保持每次需要计算下一个值得前面2个数&#xff0c;从最前面开始迭代。…

网页特殊符号HTML代码大全

网页特殊符号HTML代码大全 HTML特殊字符编码大全&#xff1a;往网页中输入特殊字符&#xff0c;需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 &acute;©©>>&micro;&reg;&&amp…

惠普ProDesk行业专用台式机U盘不识别解决办法

惠普ProDesk行业专用台式机在使用的过程当中&#xff0c;老出现插入U盘不识别的问题&#xff0c;总是需要在重启的过程中插入U盘才能使用U盘&#xff0c;解决办法是&#xff1a;&#xff08;1&#xff09;打开设备管理器&#xff0c;如下图所示&#xff1a;&#xff08;2&#…