Question

我正在尝试在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查找新元素的邻居，然后在其旁边添加新元素（这是我的非反应式应用程序的工作方式）吗？

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

还，我应该在这些范围内使用React'keys'吗？

Answer 1

一个非常简单的例子：

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中动态地在一些现有元素之间添加新元素？

1 个答案: