尝试向自定义元素添加一个名为“key”的属性，但 React 正在删除它

Question

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

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

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

然后有一个外部 javascript 文件运行，用嵌入的表单替换该元素。

key

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

任何人都可以想出一种方法，我可以将此属性添加到我的元素中，但不会被 React 删除吗？

Answer 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>

Answer 2

根据HTML标准，你不应该有这个问题。因为自定义属性应该以

data-

开头。

如果你坚持这样做，只需更改

key

的字母大小写即可解决。

Key

、

kEy

、

keY

、

KEY

，都可以。

这是因为 JavaScript 和 JSX 区分大小写，而 HTML 属性则不区分大小写。 React 已经占据了

key

，但不同字母大小写的其他拼写却没有。

当然控制台会有警告：

警告：React 无法识别 DOM 元素上的

KEY

属性。如果 你故意希望它作为自定义属性出现在 DOM 中， 将其拼写为小写

key

。如果你不小心通过了 从父组件中，将其从 DOM 元素中删除。