我正在尝试用 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/