javascript - 在 react 中选择列表项，而不是从客户端

Question

假设我在 react jsx 中有一个列表

<ul>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
    <li>stuff</>
</ul>

我将如何选择列表项之一？我的意思不是在客户端，因为我可以附加一个点击监听器。但是假设我从服务器收到一条消息，我需要对列表中的第三项做一些事情。到目前为止，我一直在做的是将列表项设置为状态，然后例如，如果我想删除中间项，我只需使用不包含中间项的新列表来更新状态。这样做的问题是，如果列表很大，那么不断删除和重新创建一个巨大的列表似乎是一种不好的做法，或者也许我不想删除/添加任何列表项，而是执行诸如添加一些文本或动画之类的操作一个特定的列表项。

Answer 1

使用对象数组
您想不断地修改大量数据而不复制它。您还希望对某些项目(但不是全部)进行附加行为。您现在可能正在使用数组，这会使实现这些目标变得困难。
另一方面，对象数组允许更大的灵 active 。在数组被索引的地方，对象可以有任意的 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是您可以在对象上创建的任意属性。您可以让渲染组件检查此属性并根据其值更改样式或逻辑。
如果您的数据库以数组格式返回您的数据，您可以在第一次从数据库中检索数据时将其转换为对象。