求助：在React（Gatsby框架）中为自定义元素保留key属性的方法

因为key是React的保留属性，直接写在JSX里会被过滤掉，没法出现在最终DOM中，给你两个靠谱的解决办法：

• 方法一：用dangerouslySetInnerHTML直接插入原生HTML
  这种方式能绕过React的属性处理逻辑，直接把带key属性的自定义元素渲染到DOM里，代码示例：

  // 在你的组件里直接这么写
  <div dangerouslySetInnerHTML={{ __html: '<gymcatch-embedded key="xxx-xxx-xxx"></gymcatch-embedded>' }} />
  

  不用担心名字里的"dangerously"，只要你插入的是固定的、可信的HTML内容，完全没风险，刚好适配这种第三方组件的场景。

• 方法二：组件挂载后手动添加属性
  先渲染不带key的自定义元素，等组件挂载完成后，通过ref拿到DOM节点再手动设置key属性，代码示例：

  import { useEffect, useRef } from 'react';
  
  const GymCatchBooking = () => {
    const formRef = useRef(null);
  
    useEffect(() => {
      if (formRef.current) {
        // 给DOM元素手动添加key属性
        formRef.current.setAttribute('key', 'xxx-xxx-xxx');
        // 如果GymCatch的JS需要重新初始化，可以在这里调用对应的全局方法
        // 比如 window.GymCatch?.init();
      }
    }, []);
  
    return <gymcatch-embedded ref={formRef}></gymcatch-embedded>;
  };
  
  export default GymCatchBooking;
  

  这个方法更符合React的常规写法，适合需要后续对元素做更多操作的场景。

内容的提问来源于stack exchange，提问作者Ben Jackson