【日常记录】【JS】styled-components库的原理,模板字符串调用函数

文章目录

    • 1、引言
    • 2、模板字符串调用函数
    • 3、实现

1、引言

在react 中,styled-components 是最流行的 css in js 模式的库

在这里插入图片描述

2、模板字符串调用函数

    let stu = {name: '呆呆狗',age: 30,address: '中国'}let str = fn`你好${stu.name}今年${stu.age}岁,来自${stu.address}`

这样会报错

在这里插入图片描述

可以先定义一个 fn fn = '123' ,这个时候还是会报错,fn 不是一个函数,那就说明这样写其实时调用fn函数

在这里插入图片描述

    let stu = {name: '呆呆狗',age: 30,address: '中国'}function fn() {console.log(arguments);return '123'}let str = fn`你好${stu.name}今年${stu.age}岁,来自${stu.address}`console.log(str);

在这里插入图片描述

3、实现

在这里插入图片描述

    HTMLElement.prototype.styles = function () {console.log(arguments);let style = ''let key = Array.from(arguments)[0]let params = Array.from(arguments).slice(1)console.log(params, key);params.forEach((f, i) => {style += key[i] + f})console.log(style);this.style = style}let config = {styles: {color: 'red',fontSize: '20px',border: '1px solid green'}}let aEl = document.querySelector('a')aEl.styles`color:${config.styles.color};font-size: ${config.styles.fontSize};border: ${config.styles.border};
`

其实这要考虑其他的很多情况,比如 如果属性值不是 ${} 传入的呢,上面的代码只是大概的思路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/815382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D室内装潢设计 Sweet Home 3D for Mac 中文直装版

Sweet Home 3D 是一款非常棒的家装辅助设计软件,支持包括中文在内的16中语言,它能帮您通过二维的家居平面图来设计和布置您的家具,还可以用三维的视角浏览整个装修布局的全貌。是一款操作起来简单方便,使用起来快捷、迅速,拥有超高…

什么是线程的上下文切换?

我们知道使用多线程的目的是为了充分利用多核CPU,比如说我们是16核,但是当创建很多线程比如说160个,CPU不够用了,此时就是一个CPU来应付多个线程(这里我们是一个CPU应对10个线程)。这个时候,操作…

HttpServletRequest/Response

HttpServletRequest 一些常用类的用法 package Demo;import javax.jws.WebService; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import ja…

CS 创世 SD NAND:嵌入式系统中的闪存存储利器

在当今数字化世界中,嵌入式系统的需求不断增长,而CS 创世 SD NAND作为一种关键的存储技术,正扮演着重要的角色。其高速、低功耗和较大存储容量的特点,使得它成为各种嵌入式设备的理想选择。 CS 创世 SD NAND 具有高度集成的特点&…

IntelliJ IDEA 2022.3.2 解决decompiled.class file bytecode version:52.0(java 8)

1 背景 使用idea 打开一个Kotlin语言编写的demo项目,该项目使用gradle构建。其gradle文件如下: plugins {id javaid org.jetbrains.kotlin.jvm version 1.8.20 } group me.administrator version 1.0-SNAPSHOTrepositories {mavenCentral()jcenter()…

低功耗高效能ARM架构助力自动化边缘小站建设

自动化边缘计算在智慧工厂中扮演着越来越重要的角色。其中,采用ARM架构的计算机因其独特的性能特点,在自动化边缘小站领域展现出了巨大的应用潜力。 ARM架构以其低功耗、高性能以及高度可定制化的优势,为构建高效率、低成本的自动化边缘小站…

YOLO系列 | 正负样本分配策略

文章目录 1 Max-IoU matching(YOLOv1~V3)2 Multi-Anchor策略(YOLOv4)3 基于宽高比的领域匹配策略(YOLOv5)4 simOTA(Simple Optimal Transport Assignment)匹配策略(YOLOX, YOLOv6)5 领域匹配simOTA(YOLOv7)6 TaskAlignedAssigner匹配策略(YOLOv8, YOLOv9)参考资料 1 Max-IoU ma…

【数据分析】嫡权法EWM

总结:基于熵值信息来计算出权重,数据具有客观性。 目录 简介 计算步骤 案例 简介 熵值法原理 熵值法的基本思路是根据指标变异性的大小来确定客观权重信息熵:信息量的期望。可以理解成不确定性的大小,不确定性越大,信息熵也就…

有条件的打破IBGP水平分割----反射规则和联邦+实验举例

背景:在一个AS中的设备运行了BGP协议,那么正常应该都连接了其他的AS,存在EBGP邻居关系;又由于IBGP的水平分割规则,导致从外部学习到的路由传递给本地AS时,需要和本地AS中运行BGP协议都要建立IBGP邻居关系&a…

使用spring-ai快速对接ChatGpt

什么是spring-ai Spring AI 是一个与 Spring 生态系统紧密集成的项目,旨在简化在基于 Spring 的应用程序中使用人工智能(AI)技术的过程。 简化集成:Spring AI 为开发者提供了方便的工具和接口,使得在 Spring 应用中集…

GRE/MGRE详解

GRE GRE:通用路由封装,是标准的三层隧道技术,是一种点对点的隧道技术; 该技术可以实现不同的网络之间安全的访问; 如上:可以使用该技术搭建一条专线,实现公司A与分公司A1之间相互通信&#xf…

AI Agent概念、能力初探

AI Agent无疑是大语言模型当前最热门且最具前景的方向,也是通往AGI的必经之路,下面我们从基本概念和系统能力层面来逐步揭开AI Agent的神秘面纱。 一、概念解析 1、什么是AI Agent? AI Agent(人工智能代理)是一种能够…

使用 ChatGPT-4 编码就像与一个醉酒的天才一起工作

我决定从头到尾使用 ChatGPT 来构建一个用于管理书签的 Chrome 扩展。在生成了 30,000 多行 JavaScript、HTML、CSS 和云后端后,我的收获是,使用 ChatGPT 进行编码就像与一个醉酒的编程天才一起工作:他很懒,患有记忆丧失&#xff…

从零实现诗词GPT大模型:专栏内容规划

一、前情介绍 本系列文章将从头编写一个类GPT的深度学习模型,并在诗词数据集上进行训练,从而可以进行诗词创作。 本次实现的类GPT模型,可以在kaggle上使用免费GPU进行训练,并可以在自己的电脑上进行推理,整个学习过程…

NAT技术

网络技术深似海呀,一段时间不用又忘。 是什么 NAT技术是网络防火墙技术的一部分,可以作用在linux防火墙或者设备防火墙,NAT技术可以实现地址和端口的转换,主要还是为了网络连通性。 作用 存在以下三个IP,A(10.234.…

LeetCode 热题 HOT 100(P31~P40)

系列文章: LeetCode 热题 HOT 100(P1~P10)-CSDN博客 LeetCode 热题 HOT 100(P11~P20)-CSDN博客 LeetCode 热题 HOT 100(P21~P30)-CSDN博客 LeetCode 热题 HOT 100(P31~P40)-CSDN博客 LC76minimum_window . - 力扣(LeetCode) 题目&…

自动化测试-web(PO:Page Object 模式)

一、PO模式 PO:Page Object(页面对象),将自动化涉及的页面或模块封装成对象。 PO能解决什么问题? 代码复用性便于维护(脚本层与业务分离)--如果元素信息发生变化了,也不用去修改脚…

leetcode经典困难题-接雨水

. - 力扣(LeetCode) 42. 接雨水 困难 相关标签 相关企业 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,…

c++的学习之路:22、多态(1)

摘要 本章主要是说一些多态的开头。 目录 摘要 一、多态的概念 二、多态的定义及实现 2.1、多态的构成条件 2.2、虚函数 2.3、虚函数的重写 2.4、C11 override 和 final 2.5、重载、覆盖(重写)、隐藏(重定义)的对比 三、思维导图 一、多态的概念 多态的概念&#…

HCIP实验:MGRE、星型拓扑

一、实验要求 1,R6为ISP只能配置IP地址,R1-R5的环回为私有网段 2,R1/4/5为全连的MGRE结构,R1/2/3为星型的拓扑结构,R1为中心站点 3,所有私有网段可以互相通讯,私有网段使用OSPF完成。 二、实验…