javascript - 如何在 React 中动态地在一些现有元素之间添加新元素?

标签 javascript reactjs

我正在尝试用 React 重写传统的 html/js 应用程序。我想要构建一个 React 组件,它将由许多彼此相邻的不同跨度组成。

<span id="1">one</span><span id="2">two</span><span id="4">four</span>

这些元素将从某种状态生成。状态将来可能会发生变化,并且可能需要添加或删除新的跨度。例如,将来可能会引入值“三”,并且需要将其放置在一些先前创建的元素之间(“二”和“四”之间)。跨度应如下所示:

<span id="1">one</span><span id="2">two</span><span id="3">three</span><span id="4">four</span>

我的问题是,每次进行一个小的状态更改时,我是否应该在每次调用 render() 时完全重新创建状态的所有范围?或者,我可以通过 id 找到新元素的邻居,然后在其旁边添加新元素(这就是我的非 react 应用程序的工作原理)?

前者似乎添加一个新跨度需要大量工作。后者似乎更有效,但我不知道是否可以使用 document.getElementById() 或等效的东西,并以更传统的 html/js 方式添加新元素。

另外,我应该对这些跨度使用 React 'keys' 吗?

最佳答案

一个非常简单的例子:

const myArr = [
  { id: 1, value: 'one' },
  { id: 2, value: 'two' },
  { id: 4, value: 'four' }
]

myArr.map(item => <span key={item.id}>{item.value}</span>)

现在,如果您在某个时刻向 myArr 添加另一个对象并相应地对其进行排序,它将出现在您通过排序指定的位置。只有带有对react-virtual-dom来说是新的键的元素才会被重新渲染,这意味着新对象添加到了myArr中。重置将从最后一个渲染周期开始。

因此,通过使用唯一的键,您可以让 React 理解需要创建、删除或更新哪些动态元素

关于javascript - 如何在 React 中动态地在一些现有元素之间添加新元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54292262/

相关文章:

javascript - 浏览器中的 Python 和 React/Redux? (原为 : Transcrypt and React/Redux)

Javascript 如果单击特定键,我如何每 5 秒检查一次?

javascript - 判断HTTP请求的数据类型

javascript - 使用编解码器 : Apple ProRes (apch) is not getting played through video tag in chrome or IE11 编码的视频文件 .mov

reactjs - create-react-app 在依赖项部分安装 devDepcies

reactjs - React、onClick 仅在第二次单击后才起作用、Axios、Async/Await

javascript - 在 javascript 中, "this"在对象的对象中运行时似乎丢失了

Javascript - 使用 RegExp 进行替换时遇到问题

javascript - React如何在生命周期方法中处理对象严格相等

javascript - 如何使用react以正确呈现可移动输入的列表?