React:styled-components

Posted 2020-10-24 scandf

``是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\nstring 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其实就是函数传递。