将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/736314.shtml

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

相关文章

k8s中的PV和PVC存储介绍

目录 一.PV介绍 1.含义 2.关键配置参数 二.PVC介绍 1.含义 2.关键参数配置 三.PV和PVC的生命周期问题 1.PV的生命周期会有4个阶段 2.用户申请空间PV的周期流程 3.PV和PVC的使用/释放/回收 四.案例演示 1.NFS配置 2.新建PV 3.新建PVC 4.新建Pod测试 5.模拟删除P…

极狐GitLab 16.1 重点功能解读,更好的 DevOps 体验如约而至【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 极狐GitLab 在去年 6 月份发布了 16.1 版本。此次发布带来了全…

Linux虚拟机安装Redis

官网下载压缩包&#xff1a;官网链接&#xff0c;然后将对应的tar.gz压缩包放入虚拟机下的/opt目录下。由于redis是C语言开发的&#xff0c;因此需要安装gcc编译器来编译代码&#xff0c;我们下载的压缩包里面是源代码&#xff0c;需要编译。通过yum install gcc指令下载C语言的…

微信小程序使用 iconfont

base64 形式引入 首先我们点击 iconfont 项目中的 项目设置 按钮&#xff0c;位置如下图所示&#xff1a; 我们勾选图中所示三种字体格式&#xff0c;选择 base64 是为了将另外两种字体转为 base64 形式&#xff0c;而选择 woff 与 ttf 字体原因如下&#xff1a; TTF 兼容性更…

Django高级之-cookie-session-token

Django高级之-cookie-session-token 发展史 1、很久很久以前&#xff0c;Web 基本上就是文档的浏览而已&#xff0c; 既然是浏览&#xff0c;作为服务器&#xff0c; 不需要记录谁在某一段时间里都浏览了什么文档&#xff0c;每次请求都是一个新的HTTP协议&#xff0c; 就是请…

大数据 - Spark系列《十二》- 名词术语理解

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…

redis介绍和使用

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据结构存储系统&#xff0c;它以键-值对&#xff08;key-value&#xff09;的形式存储数据。Redis支持多种数据结构&#xff0c;包括字符串、哈希表、列表、集合、有序集合等。Redis的特点是高性能、高…

C语言游戏实战(11):贪吃蛇大作战(多人对战)

前言&#xff1a; 这款贪吃蛇大作战是一款多人游戏&#xff0c;玩家需要控制一条蛇在地图上移动&#xff0c;吞噬其他蛇或者食物来增大自己的蛇身长度和宽度。本游戏使用C语言和easyx图形库编写&#xff0c;旨在帮助初学者了解游戏开发的基本概念和技巧。 在开始编写代码之前…

是否可以在HTTP中缓存POST方法

如果您想知道是否可以缓存post请求&#xff0c;并尝试研究该问题的答案&#xff0c;那么您很可能不会成功。当搜索“缓存post请求”时&#xff0c;第一个结果是这个StackOverflow问题。 答案是令人困惑的&#xff0c;包括缓存应该如何工作&#xff0c;缓存如何根据RFC工作&…

RDD算子介绍(二)

1. coalesce 用于缩减分区&#xff0c;减少分区个数&#xff0c;减少任务调度成本。 val rdd : RDD[Int] sc.makeRDD(List(1, 2, 3, 4), 4) val newRDD rdd.coalesce(2) newRDD.saveAsTextFile("output") 分区数可以减少&#xff0c;但是减少后的分区里的数据分布…

代码随想录算法训练营Day41 ||leetCode 0-1背包问题 || 416. 分割等和子集

0-1背包问题 dp[i][j]的含义&#xff1a;从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 那么可以有两个方向推出来dp[i][j]&#xff0c; 不放物品i&#xff1a;由dp[i - 1][j]推出&#xff0c;即背包容量为j&#xff0c;里面不放…

02-app端文章查看,静态化freemarker,分布式文件系统minIO-黑马头条

app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO 1)文章列表加载 1.1)需求分析 文章布局展示 1.2)表结构分析 ap_article 文章基本信息表 ap_article_config 文章配置表 ap_article_content 文章内容表 三张表关系分析 1.3)导入文章数据库 1.3.1)导入数据…

详解@Configuration

简介 Configuration注解用于标识一个类作为Spring的配置类&#xff0c;从而允许使用纯Java代码的方式来定义Bean和Bean之间的依赖关系。 Configuration注解是Spring框架中非常核心的一个功能&#xff0c;它提供了一种替代XML配置文件的方法。通过该注解&#xff0c;开发人员可…

ROS2从入门到精通0-2:ROS2简介、对比ROS1与详细安装流程

目录 0 专栏介绍1 什么是机器人操作系统&#xff1f;2 ROS的发展历程3 ROS2与ROS1的区别4 ROS2安装4.1 基本安装4.2 测试ROS24.2.1 测试一&#xff1a;发布者与订阅者4.2.2 测试二&#xff1a;海龟仿真器 5 常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌…

信息系统项目管理师--成本管理

项⽬成本管理重点关注完成项⽬活动所需资源的成本&#xff0c;但同时也考虑项⽬决策对项⽬产品、服务或成果的使⽤成本、维护成本和⽀持成本的影响。不同的⼲系⼈会在不同的时间&#xff0c;⽤不同的⽅法 测算项⽬成本。 就某些项⽬&#xff0c;特别是⼩项⽬⽽⾔&#xff0c;成…

FocusVisualStyle通常是键盘焦点样式

设置了Button的FocusVisualSytle但是死活没有效果&#xff0c;查了一下这个是键盘焦点样式&#xff0c;摁下Tab键了才能让Button有焦点 <ButtonWidth"100"Height"30"FocusVisualStyle"{DynamicResource MyFocusVisual}">按钮1 </Butto…

VSCode报错:/bin/sh: python: command not found

背景 以前都是直接用txt写python&#xff0c;然后直接命令行运行。 这次涉及的代码较多&#xff0c;决定用编译器。 写好的一段python点击运行报错&#xff01; 问题描述 因为我本地安装的是python3&#xff0c;但是vscode用的是另一个路径的python&#xff0c;所以找不到 解决…

_note_04_02

1&#xff1a;输出1-20之间的奇数。 package _09142023.homework_04;import java.util.Scanner;/**** 输出1-20之间的奇数。**/ public class _07_1 {public static void main(String[] args) {System.out.println("1到20之间的奇数&#xff1a;");for (int i 1; i…

视觉语言处理:用Transformer桥接视觉与语言

引言 人工智能研究的前沿领域见证了显著的交叉融合。将计算机视觉和自然语言处理的领域融合&#xff0c;问题随之而来&#xff1a;AI能否直接从其视觉表现&#xff0c;即从原始像素中辨识和理解语言&#xff1f;在这篇博客中&#xff0c;我试图探究AI从图像中直接理解自然语言的…

在 Android 上恢复已删除文件的 5 种简单方法

您可能会因为意外删除、未完成的 Android 更新、手机意外关机等原因而丢失 Android 上的重要数据。新技术的发展使许多手机功能或程序能够从内部恢复丢失的数据。 在 Android 上恢复已删除文件的 5 种简单方法 然而恢复成功率的不确定性也成为人们克服数据丢失困境的重要考虑因…