reactjs - React 'key' 的有效符号是什么

Question

react key prop 的有效符号是什么；

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

就我而言，我想使用 URL 作为键

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

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

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

我问的原因是我在文档中找不到任何使用非字母数字字符作为 key 的示例，并且还明确指出，如果您没有可以使用的 ID作为要渲染的对象的键，您可以散列它的某些部分来创建键。虽然这可能是因为您不应该使用很长的 key ，因此应该首先对内容进行哈希处理以截断其大小，但似乎整个文档隐含地表示仅应使用字母数字字符作为 key 。

Answer 1

React key 的要求在reconciliation 的文档中得到了最好的描述。

In practice, finding a key is not really hard. Most of the time, the element you are going to display already has a unique id. When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. Remember that the key only has to be unique among its siblings, not globally unique.

因此， key 应该是唯一的(在其同级 key 中)并且稳定。

因此，您的示例非常合适。空格也应该没问题。