React:styled-components
``是es6的Template Literals(模版字符串),许多人对这个一知半解,今天在这边总结下:
`${expression}`(表达式插补)
var x;
var y;
sth.innerHTML = `相对当前盒子坐标:x轴:${x},y轴:${y}`
这样表示少了很多代码量并且提高了阅读性,不然你需要用+““+来拼接字符串,将拼接字符串更简单的表示出来,再举栗子
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."
模版表示法(${}里面是js表达式,所以包括变量等)
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
多行字符串
console.log("string text line 1\n\
string text line 2");
// "string text line 1
// string text line 2"
模版字符串表示法
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
只是简单加了个回车
主要讲讲styled-components里面的语法,用过这个框架的人都知道,定义一个包含样式的h1:styled.h1`font-size:1.5em;.....`,这里面就涉及到了模版字符串,一开始不知道为什么这样写,以为又是什么高科技,测试完才发现其实:
styled.h1`
font-size:1.5em;
`
就等于如下
styled.h1("font-size:1.5em;")
为什么这样说呢?
我们来看一个测试:
现在控制台定义一个函数:
//在浏览器控制台输入
//这个函数的意思就是输出这个函数的所有参数,js中的rest用法
const f = (...args) => {console.log(...args)}
在控制台输入:f(123) 或者 f('123')都是正确的输出
在控制台输入:f`123${'abc'}`
输出结果:(2) ["123", "", raw: Array(2)] "abc" >>>一个包含"123",""的长度为2的数组,并在后面输出abc
在控制台输入:f`123${'abc'}${'def'}`
输出结果:(3) ["123", "", "", raw: Array(3)] "abc" "qwe" >>>一个包含"123","",""的长度为2的数组,并在后面输出abc,cdf结合两次输出结果,可以发现它总是把${}里面的东西转换成""和正常的字符串放在一个数组里面,并在后面单独输出每个${}的值
在控制台输入:f`1+2=${1+2}${[1,2,3,4]}`
输出结果:(3) ["1+2=", "", "", raw: Array(3)] 3 (4) [1, 2, 3, 4] 现在足以证明只要被${}括起来都会转换成""放在一个数组里面,并且在后面输入${}里面的值
我们再来看一个测试:
//在浏览器控制台输入
//使用rest参数,当你传入的参数是一个函数的话就执行这个函数,其他类型一概不执行
const testTemplate = (...args) => args.forEach(arg => {
if (typeof arg === 'function'){
arg();
}
})
上面定义了一个函数,接下来我们来传参数并且看结果了来测试模版字符串的精髓所在。
在控制台输入:testTemplate(1,2)
输出结果:undefined >>>意料之中,因为当你传入的参数是一个函数的话就执行这个函数,其他类型一概不执行。
在控制台输入:testTemplate(1,() => {consolo.log('执行了')})
输出结果: 执行了 >>>这里打印出‘执行了’,说明后面的函数被执行到
在控制台输入:testTemplate`1,() => {console.log('执行了')}`
输出结果: 执行了 >>>跟上面加了括号的结果一样。
所以styled.h1,styled.div等等其实都是一个函数,它们接受模版字符串这样的参数,而为了实现根据传入的props值显示不同样式,可以这样定义:
const MyDiv = styled.div`
color:${props => props.color};
font-size:${props => props.bigger ? '2em' : '1em'}
`
使用时,可以这样写:
//bigger={true} 也可以省略{true},直接写 bigger
<MyDiv color="green" bigger={true}>something in div...</MyDiv>
总结:
styled-components其实就是函数传递。
React:styled-components的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- React & styled component
React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...
- [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props
Because @types/react has to expose all its internal types, there can be a lot of confusion over how ...
- (翻译)React Container Components
原文:Container Components Container Components 在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式. 在 ...
- React组件Components的两种表示方式
函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
随机推荐
- 30天轻松学习javaweb_修改tomcat的servlet模板
在MyEclipse目录下搜索com.genuitec.eclipse.wizards 得到搜索结果 com.genuitec.eclipse.wizards_9.0.0.me201108091322 ...
- sqlserver 登录记录(登录触发器)
本人自用 sqlserver 账号登录的记录(记录表+登录触发器) --存储账号的登录记录信息 use [YWmonitor] go create table access_log ( ,) NOT ...
- ProcessFun
#pragma once #ifndef __PROCESSFUN_H__ #define __PROCESSFUN_H__ #include <iostream> #include &l ...
- makefile.new(7117) : error U1087: cannot have : and :: dependents for same target
makefile.new(7117) : fatal error U1087: cannot have : and :: dependents for same target(2012-05-21 2 ...
- STM32时钟初始化函数SystemInit()详解【转】
花了一天的时间,总算是了解了SystemInit()函数实现了哪些功能,初学STM32,,现记录如下(有理解错误的地方还请大侠指出): 使用的是3.5的库,用的是STM32F107VC,开发环境RVM ...
- ssm+mysql 时间显示相差了12小时的问题 Gson
怎么改时区,连接字符串加时区都无效,后来才发现原来返回的是对的,并不是时区问题. 后来感觉是gson问题,关键是在其他数据表并没有这个问题. 把 gson改成 Gson gson = new Gson ...
- playbackRate控制音频播放倍速
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 并发编程(六)——进程/线程池、协程、gevent第三方库
进程/线程池.协程.gevent第三方库 一.进程/线程池 1.进程池 (1)什么是进程池 如果需要创建的子进程数量不大,可以直接利用multiprocess中的Process来创建.但是当需要创建上 ...
- 某个ip段可以访问mysql
我们先创建一个测试用户LimitIP,只允许192.168段的IP地址访问,具体权限如下所示: mysql> GRANT SELECT ON MyDB.* TO LimitIP@'192.168 ...
- Warshall算法和Floyd算法
不用说这两位都是冷门算法……毕竟O(n^3)的时间复杂度算法在算法竞赛里基本算是被淘汰了……而且也没有在这个算法上继续衍生出其他的算法… 有兴趣的话:click here.. 话说学离散的时候曾经有个 ...