尝试向自定义元素添加名为“key”的属性，但 React 正在将其删除答案

【问题标题】：Trying to add an attribute called "key" to a custom element but React is removing it尝试向自定义元素添加名为“key”的属性，但 React 正在将其删除
【发布时间】：2023-01-11 02:35:38
【问题描述】：

我正在 React 中构建一个静态站点（使用 Gatsby 框架）。

该站点用于瑜伽工作室，我需要将工作室预订表格小部件嵌入到页面上。该小部件由名为 GymCatch 的服务提供。要嵌入他们的小部件，您必须添加一个带有名为“key”的属性的自定义 html 元素 - 您可以将 api 密钥粘贴到其中：

<gymcatch-embedded key="xxx-xxx-xxx"></gymcatch-embedded>

然后有一个外部 javascript 文件运行以用嵌入式表单替换此元素。

key 属性显然在 React 中被广泛使用，是一个保留的属性名称。因此它不会进入 DOM。

谁能想到一种方法可以将此属性添加到我的元素，但不会被 React 删除？

【问题讨论】：

您是否尝试过将标签放入 HTML 文件中？
我相信你可以使用 dangerouslySetInnerHTML 来生成那个标签，React 会在 DOM 中忽略它。

标签： javascript html reactjs custom-element

【解决方案1】：

您可以使用 dangerouslySetInnerHTML 将任意 HTML 注入 DOM。显然，如果这涉及任何用户输入，您需要先对其进行清理，但对于这种事情来说，这是安全的：

const Foo = () => {
  const customtag = {
    __html: '<gymcatch-embedded key="xxx-xxx-xxx"></gymcatch-embedded>'
  };  
  
  return (
    <span dangerouslySetInnerHTML={customtag} />
  )
}

ReactDOM.render(
  (<Foo/>), document.getElementById("root")
);

// proof:
console.log(document.getElementById("root").innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：