在 GraphQL 中,您可以编写如下代码来定义查询:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
在样式化组件中,您可以像这样定义样式化组件:
const Button = styled.button`
background-color: papayawhip;
`
这个语法是什么?我知道使用模板文字,您可以使用以下语法将变量分入:${foo}
但我从未见过这个被使用过。任何指导将不胜感激。
这些都是标记模板文字。背包之前的部分是对将被调用来处理字符串的函数的引用。
该函数传递变量(${}
部分)作为参数以及围绕分解为数组的变量的字符串片段。函数的返回值成为模板的值。由于这种非常通用的格式,您几乎可以使用该函数执行任何操作。这是一个快速而肮脏的示例,它获取变量(为了方便起见,将其收集到一个数组中),将它们变为大写,然后将它们放回字符串中:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)