React"key"的有效符号是什么

Question

反应关键支柱的有效符号是什么;

<div key="can i use spaces for example?"></div>

在我的情况下,我想使用URL作为关键

const links = [
    {
        label: 'foo label',
        href: 'https://example.com',
    },
    {
        label: 'bar label',
        href: 'https://example.com',
    }
]

links.map(
    link => (<a key={link.href} href={link.href}>{link.label}</a>)
);

这有效吗？我以为我可以使用一些哈希函数来首先传递href,但如果任何字符保证在键值中有效,这是一个毫无意义的步骤.

我问的原因是我在文档中找不到任何使用非字母数字字符作为键的示例,并且还明确说明,如果您没有用作键的ID您正在渲染的对象可以hash some part of it to make a key.虽然这可能是因为你不应该使用非常长的密钥,并且应该首先散列内容以截断它的大小,但似乎整个文档隐含地说只应使用字母数字字符作为密钥.

Answer 1

React 密钥的要求在协调文档中得到了最好的描述

实际上，找到一把钥匙并不难。大多数时候，您要显示的元素已经有一个唯一的 ID。如果不是这种情况，您可以向模型添加新的 ID 属性或对内容的某些部分进行哈希处理以生成密钥。请记住，密钥只需在其同级密钥中唯一，而不是全局唯一。

因此，密钥应该是唯一的（在其兄弟姐妹中）并且稳定。

因此，你的例子很合适。空间也应该没问题。