React组件开发过程中 往往为了偷懒而使用JSX行内样式进行开发, 后续才进行拆分模块化
但是拆分的时候,复制JSX的行内样式转成CSS就是很恶心🤢的一个问题,要把引号去掉,把逗号改为分号,驼峰改成中划线
源自偷懒的本能, 索性就造个轮子解决一下~
同时也造了个Alfred的插件 https://github.com/WangGuibin/WGBToolsConfigRepository/raw/master/oh-my-workflows/JSX行内样式与CSS样式互转工具.alfredworkflow
但是拆分的时候,复制JSX的行内样式转成CSS就是很恶心🤢的一个问题,要把引号去掉,把逗号改为分号,驼峰改成中划线
源自偷懒的本能, 索性就造个轮子解决一下~
同时也造了个Alfred的插件 https://github.com/WangGuibin/WGBToolsConfigRepository/raw/master/oh-my-workflows/JSX行内样式与CSS样式互转工具.alfredworkflow
JSX => CSS
- 驼峰 => 中划线
- 单/双引号转无引号
- 逗号转分号
jsx
display:'flex',
justifyContent:'flex-start’,
flexDirection:’row’,
alignItems:’center’,
flexFlow:’wrap',
CSS => JSX
css
display:flex;
justify-content:flex-start;
flex-direction:row;
align-items:center;
flex-flow:wrap;
- 分号分割
- 遍历 分割冒号
a. 第一部分 中划线 => 驼峰
b. 第二部分 加上单引号
c. 拼接第一和第二部分用逗号连接
核心代码
//驼峰转中划线
function toMidLine(text) {
return text.replace(/([A-Z])/g, "-$1").toLowerCase();
}
//中划线转驼峰
function toHump(name) {
return name.replace(/\-(\w)/g, function(all, letter) {
return letter.toUpperCase();
});
}
//jsx => css
function jsx2css(text) {
text = toMidLine(text);
text = text.replace(/\"/g, "");
text = text.replace(/\'/g, "")
text = text.replace(/,/g, ";")
return text;
}
//css => jsx
function css2jsx(text) {
var rowArr = text.split(';');
rowArr.pop();
var result = '';
for (let i = 0; i < rowArr.length; i++) {
var ele = rowArr[i].split(":");
var firstEle = ele[0].trim();
var prefix = toHump(firstEle) + ':'
var lastEle = ele[1].trim();
result += prefix + "'" + lastEle + "',";
result += '\n';
}
return result;
}
- 上一篇:关于使用Xcode的奇技淫巧
- 下一篇: Xcode13正式版40个新特性整理汇总
- 新版iPadmini要来了 苹果5月7日即将举行新品活动
- 苹果再次和OpenAI进行谈判后者提供人工智能技术给iPhone等产品
- 苹果推出的12.9英寸iPad Air将采用LCD屏
- 台积电宣布1.6纳米芯片 会被用于苹果未来几代芯片
- 苹果设计采用台积电下一代2纳米制造工艺芯片
- 2024苹果将Apple ID更名为“Apple Account”
- 在《舍伍德侠盗团》里,文艺复兴成魔幻土匪
- “定档派对”发布会上,《元梦之星》正式宣布全平台上线期
- 加密生态系统的成功都由三个关键因素
- 以太坊 Devconnect :基于Rollup的Layer1排序
- 人工智能(AI)是什么,它与加密货币有什么关系?
- 11月的加密市场保持了上升趋势,总市值环比增长11%
相关软件
网友评论
评论: