``是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的更多相关文章

  1. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  2. React & styled component

    React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...

  3. [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 ...

  4. (翻译)React Container Components

    原文:Container Components Container Components 在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式. 在 ...

  5. React组件Components的两种表示方式

    函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...

  6. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  7. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  8. The Road to learn React书籍学习笔记(第一章)

    react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...

  9. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  10. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

随机推荐

  1. 30天轻松学习javaweb_修改tomcat的servlet模板

    在MyEclipse目录下搜索com.genuitec.eclipse.wizards 得到搜索结果 com.genuitec.eclipse.wizards_9.0.0.me201108091322 ...

  2. sqlserver 登录记录(登录触发器)

    本人自用 sqlserver  账号登录的记录(记录表+登录触发器) --存储账号的登录记录信息 use [YWmonitor] go create table access_log ( ,) NOT ...

  3. ProcessFun

    #pragma once #ifndef __PROCESSFUN_H__ #define __PROCESSFUN_H__ #include <iostream> #include &l ...

  4. 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 ...

  5. STM32时钟初始化函数SystemInit()详解【转】

    花了一天的时间,总算是了解了SystemInit()函数实现了哪些功能,初学STM32,,现记录如下(有理解错误的地方还请大侠指出): 使用的是3.5的库,用的是STM32F107VC,开发环境RVM ...

  6. ssm+mysql 时间显示相差了12小时的问题 Gson

    怎么改时区,连接字符串加时区都无效,后来才发现原来返回的是对的,并不是时区问题. 后来感觉是gson问题,关键是在其他数据表并没有这个问题. 把 gson改成 Gson gson = new Gson ...

  7. playbackRate控制音频播放倍速

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 并发编程(六)——进程/线程池、协程、gevent第三方库

    进程/线程池.协程.gevent第三方库 一.进程/线程池 1.进程池 (1)什么是进程池 如果需要创建的子进程数量不大,可以直接利用multiprocess中的Process来创建.但是当需要创建上 ...

  9. 某个ip段可以访问mysql

    我们先创建一个测试用户LimitIP,只允许192.168段的IP地址访问,具体权限如下所示: mysql> GRANT SELECT ON MyDB.* TO LimitIP@'192.168 ...

  10. Warshall算法和Floyd算法

    不用说这两位都是冷门算法……毕竟O(n^3)的时间复杂度算法在算法竞赛里基本算是被淘汰了……而且也没有在这个算法上继续衍生出其他的算法… 有兴趣的话:click here.. 话说学离散的时候曾经有个 ...