首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

不同元素的相同id在react中奇怪地工作吗?

在React中,不同元素具有相同的id是不推荐的,因为id应该在整个文档中是唯一的。当多个元素具有相同的id时,可能会导致一些奇怪的行为和bug。

首先,id在HTML中用于唯一标识元素。如果多个元素具有相同的id,那么在使用getElementById等方法时,只会返回第一个匹配的元素,而忽略其他具有相同id的元素。这可能导致意外的结果和错误的操作。

其次,在React中,id通常用于处理事件和状态。如果多个元素具有相同的id,那么在处理事件时可能会出现问题。例如,如果使用id来标识一个表单元素,并且在处理表单提交时使用了id来获取元素的值,那么只会获取到第一个具有相同id的元素的值,而忽略其他元素。

为了避免这种奇怪的行为和bug,我们应该确保在React中每个元素具有唯一的id。可以使用自动生成的id,例如使用uuid库生成唯一的id。另外,可以使用其他属性来标识元素,例如使用class或data属性。

总结起来,不同元素具有相同id在React中是不推荐的,可能会导致奇怪的行为和bug。为了避免这种情况,应该确保每个元素具有唯一的id,并且可以使用自动生成的id或其他属性来标识元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何掌握高级react设计模式: Render Props【译】

这种设计模式起初可能有点令人头疼(还记得我们第2部分中使用 context consumer 函数?)...我们传递了一个像以前一样函数,但不总是返回 'string',而是返回我们调用它时传入参数! 等一下,这不是我们第1部分遇到问题?...我们不再需要向 stepper 组件添加任何子项,我们需要做就是 render 返回相同标记。 ? 这实现了什么?很棒,现在树每个组件都可以访问所有 props。...然而,使用这种设计模式时要权衡一点,那就是代码可读性略低于之前。还记得我们本系列前面看到奇怪函数,那个要在 Context.consumer 组件添加函数。 ?...最终,它是可重用,我们可以将它直接放在任何其他应用程序,无需预先进行任何设置,它都完美工作。 ?

1.5K30

我用 React 和 Vue 构建了同款应用,来看看哪里不一样(2020 版)

两款应用 CSS 代码完全相同,但代码所处位置有所不同。记住这一点,接下来让我们看一下它们文件结构: ? 你会发现它们结构也几乎相同。...于是你看到我们将相同数据传递给了两者,但各自结构有所不同 React ,至少从 2019 年开始,我们一般会通过一系列 Hooks 处理状态。...应用,我们将简单调用 name 来引用同一段数据。这里主要区别在于我们不能简单写上name = 'John',因为 React 有一些限制来预防这种简单且无所顾忌突变。...你可能觉得…list 看起来很奇怪:开头三个点称为 spread 运算符,负责将 list 所有值作为单独项目传递,而不是简单把所有项目打包在一起作为数组传递。感觉有些糊涂?...== id); } Vue 里是怎么做? Vue 需要方法稍微有一些不同

4.8K30

如何掌握高级react设计模式: Render Props【译】

最初例子,我们只是向下传递 'string',将其放在 'div' 并进行渲染。 然而,在下一个例子,我们将它作为函数传递并将其放在 'div' ,但这次是调用函数来实现完全相同结果。...我们传递了一个像以前一样函数,但不总是返回 'string',而是返回我们调用它时传入参数! 等一下,这不是我们第1部分遇到问题?...我们不再需要向 stepper 组件添加任何子项,我们需要做就是 render 返回相同标记。  这实现了什么?很棒,现在树每个组件都可以访问所有 props。...然而,使用这种设计模式时要权衡一点,那就是代码可读性略低于之前。还记得我们本系列前面看到奇怪函数,那个要在 Context.consumer 组件添加函数。 ...最终,它是可重用,我们可以将它直接放在任何其他应用程序,无需预先进行任何设置,它都完美工作。 源码见:  https://codesandbox.io/embed/6xmrjo7xn?

89220

自动增长Textareas最干净技巧「心得分享」

想法是使 更像 ,因此它高度可以扩展以包含当前值。这几乎是奇怪,没有一个简单原生解决方案,不是? 现在我得到了一个非常好原生解决方案。...相反,​您可以另一个元素完全复制该元素外观,内容和位置,再复制元素隐藏起来。 现在,这三个元素都是相互联系。无论哪一个子元素最高,都会把父元素推到那个高度,而另一个子元素也会跟随。...这是一个相同副本,只是视觉上隐藏了 visibility: hidden;;如果不是完全一样,那么所有的东西都不会完全正确生长在一起。...我们还需要在复制文本上 white-space: pre-wrap; ,因为这就是textareas表现。 这是最奇怪部分 演示,我将 ::after 用于复制文本。...这是奇怪部分: content: attr(data-replicated-value) " ";复制代码 因为我使用是伪元素,伪元素是将 data 属性从元素取出并以额外空间将内容呈现到页面的行

1.2K10

记录升级 React 18 后发现一些问题,很有用

我在下面的代码创建了一个示例:我希望它在等待一秒钟后抛出一个“警报”对话框,但奇怪是,这个对话框根本就没有运行。...毕竟,当我们useEffect返回函数中进行清理以第一次渲染时移除它时,useRef初始setter每次渲染开始时运行,对? 嗯,不完全是。...你看,React团队希望未来版本添加一个特性利用了“可重用状态”概念。...然而,这种React 18严格模式下行为转变不仅仅是为了保护React团队未来:它还提醒你要正确遵守React规则,并按照预期清理你行为。...更有可能是,大多数应用程序都能够毫无问题升级到React最新版本。 尽管如此,这些React错误还是爬到了我们应用程序

1.1K30

React 作为 UI 运行时来使用

我们例子React 会这样做: ? 如果 React 元素 reactElement.props.children 中含有子元素React 会在第一次渲染递归为它们创建宿主实例。...这就是为什么每次当输出包含元素数组时,React 都会让你指定一个叫做 key 属性: ? key 给予 React 判断子元素是否真正相同能力,即使渲染前后它在父元素位置不是相同。...需要注意是 key 只与特定父亲 React 元素相关联,比如 。React 并不会去匹配父元素不同但 key 相同元素。...最好答案就是:什么时候你会说一个元素不会改变即使它在父元素顺序被改变? 例如,我们商品列表,商品本身 ID 是区别于其他商品唯一标识,那么它就最适合作为 key 。...许多组件更新过程总是会接收到不同 props ,所以对它们进行缓存只会造成净亏损。 原始模型 令人讽刺是,React 并没有使用“反应式”系统来支持细粒度更新。

2.4K40

React 一个奇怪 Hook

你可能已经注意到 React Hook 中有一个名为 useMemo 奇怪钩子。这个奇怪钩子意味着什么,它作用是什么?重要是,它是怎样为你提供帮助?... memoization ,当随后传递参数相同时,它会记住结果。例如有一个计算 1 + 1 函数,它将返回结果 2。... React ,memoization 可以优化我们组件,避免不需要时进行复杂重新渲染。例如可以用 React.memo 对程序进行优化,它就像一个纯组件一样,可以包装你组件。...它们行为类似于函数参数。依赖关系列表是 useMemo 要去监视元素:如果没有改变,那么函数结果将会保持不变,否则它将重新运行这个函数。...实现 useMemo 时,你需要问问自己:“这真的是一个代价高昂函数?” 代价高昂意味着它正在消耗大量资源(如内存)。

1.8K10

React 性能优化实践

你可能已经注意到 React Hook 中有一个名为 useMemo 奇怪钩子。这个奇怪钩子意味着什么,它作用是什么?重要是,它是怎样为你提供帮助?... memoization ,当随后传递参数相同时,它会记住结果。例如有一个计算 1 + 1 函数,它将返回结果 2。... React ,memoization 可以优化我们组件,避免不需要时进行复杂重新渲染。例如可以用 React.memo 对程序进行优化,它就像一个纯组件一样,可以包装你组件。...它们行为类似于函数参数。依赖关系列表是 useMemo 要去监视元素:如果没有改变,那么函数结果将会保持不变,否则它将重新运行这个函数。...实现 useMemo 时,你需要问问自己:“这真的是一个代价高昂函数?” 代价高昂意味着它正在消耗大量资源(如内存)。

1.5K20

你需要react面试高频考察点总结

元素element可以属性props包含其他元素(译注:用于形成元素树)。创建一个React元素element成本很低。元素element创建之后是不可变。...React必须使用JSXReact 并不强制要求使用 JSX。当不想在构建环境配置有关 JSX 编译时,不在 React 中使用 JSX 会更加方便。...Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除辅助标识。 React 渲染集合时,向每个重复元素添加关键字对于帮助React跟踪元素与数据之间关联非常重要。... )};集合添加和删除项目时,不使用键或将索引用作键会导致奇怪行为。...它提供了一系列React组件,包括数字格式化、字符串格式化、日期格式化等。React-intl,可以配置不同语言包,他工作原理就是根据需要,语言包之间进行切换。类组件和函数组件有何不同

3.6K30

React 图解

文本,我只使用朴实语言和插图来解释 React 家族各种术语,并深入探索究竟是什么使得 React 如此特别。本文中并不需要任何代码知识便可阅读。...它就是文档对应对象模型。 先暂时忘掉它概念。我们先来看看大名鼎鼎 “Web Browser” 工作室!你能在下面的插图中找到 DOM ? ? 难道 DOM 是……一棵树?对,就是一棵树!...Domo 是 “Web Browser” 工作御用模特,他工作就是肖像画家(也可能是数百万个画家)面前摆 pose 。 肖像就是浏览器浏览网站时所看见内容。...为什么不直接告诉 Domo 你想要效果,而不是现在这样一步步告诉他怎么摆 pose ? ? 还有更酷,想象一下如果可以在要求过程中保留一个占位符来表示相同姿势不同变体。React 就能做到!...回到 “Web Browser” 工作室,你将肖像需求描述成一个个组件,React 将这些组件翻译成 Domo 所能理解内容。这将为你节省大量时间,因为你无需再一次次重复描述需求通用部分。

87541

图解React

文本,我只使用朴实语言和插图来解释 React 家族各种术语,并深入探索究竟是什么使得 React 如此特别。本文中并不需要任何代码知识便可阅读。...它就是文档对应对象模型。 先暂时忘掉它概念。我们先来看看大名鼎鼎 “Web Browser” 工作室!你能在下面的插图中找到 DOM ? ? 难道 DOM 是……一棵树?对,就是一棵树!...Domo 是 “Web Browser” 工作御用模特,他工作就是肖像画家(也可能是数百万个画家)面前摆 pose 。 肖像就是浏览器浏览网站时所看见内容。...为什么不直接告诉 Domo 你想要效果,而不是现在这样一步步告诉他怎么摆 pose ? ? 还有更酷,想象一下如果可以在要求过程中保留一个占位符来表示相同姿势不同变体。React 就能做到!...回到 “Web Browser” 工作室,你将肖像需求描述成一个个组件,React 将这些组件翻译成 Domo 所能理解内容。这将为你节省大量时间,因为你无需再一次次重复描述需求通用部分。

63320

第十篇:React “栈调和”(Stack Reconciler)过程是怎样

实际面试过程,当面试官抛出 Reconciliation 相关问题时,也多半是为了了解候选人对 Diff 掌握程度。因此本讲,“栈调和”指就是 React 15 Diff 算法。...若两个组件属于同一个类型,那么它们将拥有相同 DOM 树形结构; 2. 处于同一层级一组子节点,可用通过设置 key 作为唯一标识,从而维持各个节点在不同渲染过程稳定性。...减少递归“一刀切”策略:类型一致性决定递归必要性 结合“若两个组件属于同一个类型,那么它们将拥有相同 DOM 树形结构”这一规律,我们虽不能直接反推出“不同类型组件 DOM 结构不同”,但在大部分情况下...只有确认组件类型相同后,React 才会在保留组件对应 DOM 树(或子树)基础上,尝试向更深层次去 Diff。 这样一来,便能够从很大程度上减少 Diff 过程冗余递归操作。 3....接着,React 便能够轻松重用它“追踪”到旧节点,将 D 和 E 转移到新位置,并完成对 C 插入。这样一来,同层级下元素操作成本便大大降低。

73110

这是一篇很好互动式文章,Framer Motion 布局动画

First First ,在任何布局变化发生之前,测量我们要做动画元素位置: 获取元素位置一种方法是使用HTML元素.getBoundingClientRect()方法: const Motion...(); }, []); return ; }; Last Last 这一步,我们测量布局变化后元素位置: 为了代码实现这一点...但是,运行起来效果却是错误整个动画过程,文字明显改变。 正确缩放时间 这里问题就在于这个假设: 只要比例校正时间与父动画相同,这种方法应该是有效。...(2)恰好比(1)简单得多,而且还允许我们元素上处理各种不同时序。这也是 Framer Motion使用方法。...在这种情况下,使比例校正工作方式是通过将子元素包裹在,并将比例校正应用于,这会有一些问题: 一个运动组件DOM中有两个元素,从用户体验角度来看,这可能是个问题 所有子组件都进行了比例校正

2.4K20

Web 框架能解决什么问题?

React 是当今主流框架,还有三个较新竞争者,它们声称自己工作方式与 React 不同ReactReact 使创建交互式用户界面变得不费力。...声明性视图使你代码更可预测,更容易调试。” SolidJS “Solid 遵循与 React 相同理念……但它实现方式完全不同,放弃了使用虚拟 DOM。”...React 引擎会把渲染结果与之前结果相比较,并将差异应用于 DOM 本身。这种处理更改传播方式,被称为虚拟 DOM。 SolidJS ,这是以其存储和内置元素更明确完成。... Lit ,反应性是通过元素属性来实现,基本上是依赖 HTML 自定义元素内置反应性。...我同意,但是可能像 Svelte 和 SolidJS 这样“构建”以及像 Lit 这样自定义客户端模板引擎都只是单纯开销? 调试 构建和转译过程,需要付出成本也是不同

1.5K10

一篇包含了react所有基本点文章

React,这个列表叫做props。创建功能组件,你可以通过使用任意名称命名props。 在上面的Button组件返回中,我们写出了奇怪HTML。...函数组件有一个略有不同故事。 首先,我们为React定义一个模板,以从组件创建元素。 然后,我们指示React在某处使用它。...render方法,我们使用了正常读取语法对state两个属性读取。 没有特殊API。 现在,请注意,我们使用两种不同方式更新了状态: 传递返回一个对象函数。...React保留了渲染历史记录,当它看到一个渲染与前一个渲染不同时,它将计算它们之间差异,并将其有效地转换为DOM执行实际DOM操作。...如果状态对象或传入props被更改,则React有一个重要决定。 组件应该在DOM更新? 这就是为什么它在这里调用另一个重要生命周期方法,shouldComponentUpdate。

3.1K20

滴滴前端常考react面试题(附答案)

简单说, React元素(虛拟DOM)描述了你屏幕上看到DOM元素。换个说法就是, React元素是页面DOM元素对象表示方式。... React组件是一个函数或一个类,它可以接受输入并返回一个元素。注意:工作,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...key可以帮助 React跟踪循环创建列表虚拟DOM元素,了解哪些元素已更改、添加或删除。每个绑定key虚拟DOM元素兄弟元素之间都是独一无二。...如果没有key,Rεat就不知道列表虚拟DOM元素与页面哪个元素相对应。所以创建列表时候,不要忽略key。 ReactNative,如何解决 adb devices找不到连接设备问题?...以下是官方一个模态框示例,可以以下地址测试效果 <div id

2.2K10

设计师都能懂 Redux 指南

我们需要将这些数据分配给对应 UI 元素,这些 UI 元素表示我们浏览器实际看到内容。...注意:React(16.3)最新版本,有一个新 context API,它提取数据功能几乎与 Redux 是相同。...更新应用程序状态之前,可能需要等待多个服务器响应。我们可能需要在不同时间、不同条件下更新多处 state 状态。... Redux 术语这称之为 “派发 (dispatching) 动作”。 更改数据代码必须像数学公式一样。 相同输入情况下,它必须返回相同结果。...Redux 一般思想适用于任何地方 只要你明智使用 Redux,你可以很多情况下得到它好处,而不仅仅是React应用。 总结 有不可避免缺点。

1.6K10

从设计角度看 Redux

我们需要将这些数据分配给对应 UI 元素,这些 UI 元素表示我们浏览器实际看到内容。...注意:React(16.3)最新版本,有一个新 context API,它提取数据功能几乎与 Redux 是相同。...更新应用程序状态之前,可能需要等待多个服务器响应。我们可能需要在不同时间、不同条件下更新多处 state 状态。... Redux 术语这称之为 “派发 (dispatching) 动作”。 更改数据代码必须像数学公式一样。 相同输入情况下,它必须返回相同结果。...Redux 一般思想适用于任何地方 只要你明智使用 Redux,你可以很多情况下得到它好处,而不仅仅是React应用。 ? 总结 有不可避免缺点。

1.7K30

前端框架「React」 VS 「Svelte」

翻译 | 红薯 出品 | OSC开源社区(ID:oschina2013) JavaScript 前端开发框架,Svelte 算是一个新来搅局者,在网上我们已经听到很多关于 Svelte 哔哔...诸如 React 和 Vue 这类传统框架,它们大部分工作都在浏览器上执行,而 Svelte 构建应用过程做就了大量工作。 ‎...我只想从开发人员角度看看,使用 Svelte 和 React 开发应用程序时,感觉好吗?有趣?直观? 开工!...然后是 HTML 代码,你还可以 标签编写样式代码。有趣是,组件样式代码只对当前组件有效。这意味着组件为 标签编写样式不会影响到其他组件 元素。...「React React 可以有很多种方法给组件添加样式。直接在元素上编写样式是最常用方法。

3.5K30
领券