将props展平传到DOM上

当我们将展平(传播)的属性设置子组件时,我们会引入风险,因为我们可能会往 HTML 标签上添加它不支持的属性。

坏实践
下面这个例子会在 DOM 元素上增加一个该元素本身不支持的属性flag。

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = (props) => (<div {...props}>Test</div>);
良好实践
如果将 HTML DOM 元素需要接受的 props 分离出来再展开,会是一种更安全的做法。

const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);
或者我们也可以使用...rest去过滤掉那些HTML DOM不支持的属性。

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = ({ flag, ...domProps }) => (<div {...domProps}>Test</div>);
需要注意的是

在这种情况下,当我们使用了PureComponent的时候,即使domProps没有变化的时候,组件还是会被重新渲染。因为PureComponent对于对象使用来说比较浅

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

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

相关文章

chrome插件chrome.storage数据写入失败QUOTA_BYTES_PER_ITEM quota exceeded

Unchecked runtime.lastError while running storage.set: QUOTA_BYTES_PER_ITEM quota exceeded at Object.callback 在开发浏览器插件的时候&#xff0c;报错提示&#xff1a;超出存储限制&#xff0c;浏览器插件存储官方文档&#xff1a;https://developer.chrome.com/docs…

Linux篇面试题 2024

目录 Java全技术栈面试题合集地址Linux篇1.绝对路径用什么符号表示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命令&#xff1f;2.怎么查看当前进程&#xff1f;怎么执行退出&#xff1f;怎么查看当前路径&#xff1f;3.怎么清屏&…

Keras用tf的Strategy()分布式训练时候报XLA错误

We failed to lift variable creations out of this tf.function, so this tf.function cannot be run on XLA. A possible workaround is to move variable creation outside of the XLA compiled function. 最早用的pip -U 安装的keras没注意版本&#xff0c;直接可用。 之…

国外网站,similarweb统计网站流量的原理是什么? 这个统计数据是准确的吗? 有没有 没统计不到的?

标签&#xff1a; SimilarWeb&#xff1b; 国外网站 SimilarWeb 提供网站流量和其他互联网指标的估计&#xff0c;主要用于网站分析、竞争对手分析和市场研究。它如何工作&#xff0c;以及其数据的准确性&#xff0c;是很多人关心的问题。下面是对SimilarWeb统计网站流量原理的…

Golang-channel合集——源码阅读、工作流程、实现原理、已关闭channel收发操作、优雅的关闭等面试常见问题。

前言 面试被问到好几次“channel是如何实现的”&#xff0c;我只会说“啊&#xff0c;就一块内存空间传递数据呗”…所以这篇文章来深入学习一下Channel相关。从源码开始学习其组成、工作流程及一些常见考点。 NO&#xff01;共享内存 Golang的并发哲学是“要通过共享内存的…

【AI辅助研发】-开端:未来的编程范式

编程的四种范式 面向机器编程范式 面向机器编程范式是最原始的编程方式&#xff0c;它直接针对计算机硬件进行操作。程序员需要了解计算机的内部结构、指令集和内存管理等细节。在这种范式下&#xff0c;编程的主要目标是编写能够直接控制计算机硬件运行的机器代码。面向机器…

数据伦理:当大数据遇见道德

随着科技的飞速发展&#xff0c;大数据已经成为了我们生活中不可或缺的一部分。从智能手机到智能家居&#xff0c;从电子商务到医疗保健&#xff0c;大数据无处不在。然而&#xff0c;随着数据的广泛应用&#xff0c;数据伦理问题也逐渐浮出水面。本文将探讨大数据时代下的数据…

redis使用笔记

redis使用笔记 1、Redis简介1.1 含义1.2 功能1.3 特点 2. 常用的数据结构2.1 HASH 3 redis接口定义3.1 redisReply3.2 redisContext3.3 redisCommand 4 实践操作4.1 遇到问题4.1.1 Get哈希的时候返回error4.1.2 长度一直为0&#xff0c;str没法打印&#xff08;未解决&#xff…

uniapp地图围栏代码

UniApp 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;可以编译到 iOS、Android、H5、以及各种小程序等多个平台。在 UniApp 中实现地图围栏功能&#xff0c;通常需要使用地图服务API。对于大多数地图服务来说&#xff0c;实现围栏功能通常需要以下几个步骤&#xff1a…

java正则表达式概述及案例

前言&#xff1a; 学习了正则表达式&#xff0c;记录下使用心得。打好基础&#xff0c;daydayup! 正则表达式 什么是正则表达式 正则表达式由一些特定的字符组成&#xff0c;代表一个规则。 正则表达式的功能 1&#xff1a;用来校验数据格式是否合规 2&#xff1a;在一段文本…

Android 二维码相关(一)

Android 二维码相关(一) 本篇文章主要记录下android下使用zxing来创建二维码. 1: 导入依赖 api "com.google.zxing:core:3.5.1"2: 创建二维码 创建QRCodeWriter对象 QRCodeWriter qrCodeWriter new QRCodeWriter(); 将文本内容转换成BitMatrix BitMatrix encode …

2024,互联网打工人最终没能逃得过 AI

时间很快就来到了三月份&#xff0c;回首看过去的一年&#xff0c;如果要选择最令人着迷的新技术&#xff0c;那非 ChatGPT 莫属。 从美国的硅谷、华尔街到中国的后厂村、中关村&#xff0c;几乎所有的科技大厂们都在讨论“AIGC”。 既 ChatGPT 之后&#xff0c;几乎每天都有…

【深度学习笔记】7_2 梯度下降和随机梯度下降

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 7.2 梯度下降和随机梯度下降 在本节中&#xff0c;我们将介绍梯度下降&#xff08;gradient descent&#xff09;的工作原理。虽然梯度…

️网络爬虫与IP代理:双剑合璧,数据采集无障碍️

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

day16_购物车(添加购物车,购物车列表查询,删除购物车商品,更新选中商品状态,完成购物车商品的全选,清空购物车)

文章目录 购物车模块1 需求说明2 环境搭建3 添加购物车3.1 需求说明3.2 远程调用接口开发3.2.1 ProductController3.2.2 ProductService 3.3 openFeign接口定义3.3.1 环境搭建3.3.2 接口定义3.3.3 降级类定义 3.4 业务后端接口开发3.4.1 添加依赖3.4.2 修改启动类3.4.3 CartInf…

关于VS-QT中创建ui文件没有同时创建h和cpp文件的解决方法

以下只提供一种解决方案&#xff0c;只针对我遇到的一种情况&#xff0c;并非对所有人有效。 1.新建一个QWidget Application,项目名称建议取名为所需要的ui类的名字&#xff0c;不过不是也没关系 2.按照提示下一步&#xff0c;基类选择QWidget还是QMainWindow看自己的需要&am…

基于springboot实现摄影网站系统项目【项目源码】

基于springboot实现摄影网站系统演示 摘要 随着时代的进步&#xff0c;社会生产力高速发展&#xff0c;新技术层出不穷信息量急剧膨胀&#xff0c;整个社会已成为信息化的社会人们对信息和数据的利用和处理已经进入自动化、网络化和社会化的阶段。如在查找情报资料、处理银行账…

invoke()到底是个什么方法???

调用jquery的方法返回属性值 1、invoke&#xff08;‘val’&#xff09; 在form的select下&#xff1a; cy.get(.action-select-multiple).select([apples, oranges, bananas])// when getting multiple values, invoke "val" method first jquery中val方法是用于返…

花店小程序有哪些功能 怎么制作

​花店小程序可以为花店提供一个全新的线上销售平台&#xff0c;帮助花店扩大市场份额&#xff0c;提升用户体验&#xff0c;增加销售额。下面我们来看看花店小程序应该具备哪些功能&#xff0c;以满足用户的需求。 1. 商品展示&#xff1a;展示花店的各类花卉和花束&#xff…

Vue.js数据绑定解密:深入探究v-model和v-bind的原理与应用

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; Vue.js数据绑定解密&#xff1a;深入探究v-model和v-bind的原理与应用 一、引言 Vue.…