Javascript 混合文本和反应组件

我有一个输出纯文本与react组件混合的组件。比如：

<div>
  lorem ipsum <b>dolor</b>,{' '}
  some <a href="#">link</a> and{' '}
  again text.
  <i>great</i>.
</div>

lorem ipsum dolor，{'}
一些和{''}
再次发短信。
伟大的

渲染此对象时，react会向我输出警告

数组或迭代器中的每个子级都应具有唯一的“键”

---

我想知道如何解决这个问题。

去掉多余的花括号

<div>
  lorem ipsum <b>dolor</b>,some <a href="#">link</a> and again text <i>great</i>.
</div>

lorem ipsum dolor，一些又一个伟大的文本。

来自

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识

因此，您可以通过如下方式将键传递到组件来添加键：

<YourComponent key={index} />

但是，请注意，项索引应该只是键的最后手段

如果渲染项没有稳定的ID，则可以使用项索引作为键作为最后手段：

---

你确定没有别的事情发生吗？我在这里没有得到警告：。您的混合内容是在一个div中还是在另一个容器中，可能在幕后执行数组操作？我看不到您共享的代码会显示任何警告。你很确定这段代码显示的是警告吗？我真的很困惑，因为即使是我应用到你小提琴上的真实示例也不会重现警告。奇怪的是，将密钥添加到每个JSX元素中，比如：

您真的想通知{selectedCompany.name}中的所有用户最新的更改吗？