首页
学习
活动
专区
工具
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 和 Vue 构建了同款应用,来看看哪里不一样(2020 版)

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

4.8K30

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

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

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

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

    92720

    自动增长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.2K30

    React 性能优化实践

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

    1.5K20

    React 中的一个奇怪的 Hook

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

    1.8K10

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

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

    3.6K30

    把 React 作为 UI 运行时来使用

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

    2.5K40

    React 图解

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

    91341

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

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

    85410

    图解React

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

    64820

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

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

    2.8K20

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

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

    3.1K20

    Web 框架能解决什么问题?

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

    1.6K10

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

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

    2.3K10

    前端框架「React」 VS 「Svelte」

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

    3.6K30

    前端几个常见考察点整理

    参考:前端react面试题详细解答除了在构造函数中绑定 this,还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app...在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。React 中 keys 的作用是什么?Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。...在 React 中渲染集合时,向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。... )};在集合中添加和删除项目时,不使用键或将索引用作键会导致奇怪的行为。...策略二:如果组件的 class 一致,则默认为相似的树结构,否则默认为不同的树结构。(基于组件进行对比)在组件比对的过程中:如果组件是同一类型则进行树比对;如果不是则直接放入补丁中。

    1.3K50

    所有这些基础的React.js概念都在这里了

    我们奇怪地在上面的Button函数组件的返回输出中写出了什么样的HTML 。这既不是JavaScript也不是HTML,甚至不是React.js。但是,它非常受欢迎,成为React应用的默认设置。...函数组件有一个略有不同的故事。 首先,我们为React定义一个模板,以从组件创建元素。 然后,我们指示React在某处使用它。...在render方法中,我们使用了正常读取语法对状态的两个属性。没有专门的API。 现在,请注意,我们使用两种不同的方式更新了状态: 传递返回一个对象的函数。...React保留了渲染历史的记录,当它看到一个渲染与前一个渲染不同时,它将计算它们之间的差异,并有效地将其转换为在DOM中执行的实际DOM操作。...如果状态对象或传入属性被更改,则React有一个重要的决定。组件应该在DOM中更新吗?这就是为什么它在这里调用另一个重要的生命周期方法shouldComponentUpdate。

    1.9K20
    领券