选择react中的列表项，而不是从客户端选择
让我说我有一个列在中的列表
<ul>
<li>stuff</>
<li>stuff</>
<li>stuff</>
<li>stuff</>
<li>stuff</>
</ul>如何选择列表项之一？我并不是说在客户端，在这种情况下，我可以附加一个点击监听器。但是，假设我从服务器收到一条消息，我需要对列表中的第三项做一些事情。到目前为止，我一直在做的是将列表项设置为state，然后如果要删除中间项，只需使用不包括中间项的新列表来更新状态。这样做的问题是，如果列表很大，那么经常删除和重新创建一个巨大的列表似乎是错误的做法，或者也许我不想删除/添加任何列表项，而是做一些类似于向特定列表项添加文本或动画的操作。
回答 3
Stack Overflow用户
发布于 2020-12-08 15:20:20
使用对象数组
您想要不断地修改大量数据而不复制它。您还需要对某些项进行额外的行为，但不是所有这些项。您现在可能正在使用数组，这将使实现这些任务变得困难。
另一方面，一个对象数组允许更多的灵活性。当数组被索引时，对象可以具有任意ID和其他属性。
例如：
let myObj = [
{
id: 0,
text: 'Text from the DB',
showSpecialTextColor: false,
showSpecialAnimation: false,
},
{
id: 1,
text: 'Another text value.',
showSpecialTextColor: false,
showSpecialAnimation: false,
},
{
id: 2,
text: 'This text should display with special styling.',
showSpecialTextColor: true,
showSpecialAnimation: true,
},
]现在，您可以根据父对象的id和索引向其添加或删除项。这不需要复制或更改对象的其余部分。
myObj.map(item => {
if (item.id = 2) {
delete item
}
})showSpecialTextColor是可以在对象上创建的任意属性。您可以让呈现组件对此属性执行检查，并根据其值更改样式或逻辑。
如果数据库以数组格式返回数据，则在首次从DB检索数据时，始终可以将其转换为对象。
Stack Overflow用户
发布于 2020-12-03 21:08:42
这个案子你得有个州。列表的DOM更新取决于该列表后面的数据。一般情况下，您可以使用分页/无限大卷轴，但是我在您的问题中看到了两个注意事项：
这样做的问题是，如果列表很大，那么经常删除和重新创建一个庞大的列表似乎是错误的做法。
你不应该像它看上去那么频繁地“重现”它。不可变的数据库(如immutable.js )可以帮助您避免重新创建庞大的列表。
也许我不想删除/添加任何列表项，但是要做一些事情，比如向特定的列表项添加一些文本或动画。
这对我来说是模棱两可。我只能猜测，您试图避免搜索每个触发器上的巨型列表，例如单击或服务器消息。如果是这样的话，那么它实际上取决于您的特定实现。也许一个简单的技巧就足够了：
//pre-populated object to map a primary data type to your item.
//i suggest you restructure your data shape so you don't have to introduce extra work
const maps = {
//id: data item
}
const handleClick = (id) => {
//here you can avoid a search of entire list
const item = maps[id]
//update item as you wish
}
<ul>
{items.map(item =>
<li>
<button onClick={() => handleClick(item.id)}>Click Me</button>
</li>
}
</ul>Stack Overflow用户
发布于 2020-12-09 07:24:30
您可以使用像反应虚拟化这样的库来管理列表。这将在许多方面提高您的性能，比如它只显示在您的视口和rest中可见的那些项，它将从DOM中删除。
https://stackoverflow.com/questions/65081378
复制相似问题
腾讯云开发者
