React组件卸载时移除动态添加的meta标签方法咨询

直接通过保存动态添加的节点引用来解决，不需要依赖meta标签的ID，具体实现如下：

类组件实现方案 #

在组件实例中维护一个变量，专门存储我们添加的meta节点，这样卸载时就能直接通过引用移除：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化变量存储添加的meta节点
    this.addedMetaTags = [];
  }

  componentDidMount() {
    if (this.props.headerContent) {
      const fragment = window.document.createRange().createContextualFragment(this.props.headerContent);
      // 提取fragment中的所有meta标签
      const metaTags = Array.from(fragment.querySelectorAll('meta'));
      // 将meta标签添加到head，并保存引用
      metaTags.forEach(tag => {
        document.head.appendChild(tag);
        this.addedMetaTags.push(tag);
      });
    }
  }

  componentWillUnmount() {
    // 遍历保存的节点，逐个从head移除
    this.addedMetaTags.forEach(tag => {
      if (tag.parentNode === document.head) {
        document.head.removeChild(tag);
      }
    });
    // 清空引用数组
    this.addedMetaTags = [];
  }

  render() {
    // 你的组件渲染内容
    return <div>...</div>;
  }
}

方案说明 #

• 利用组件实例变量this.addedMetaTags记录所有我们手动添加的meta节点，完全不需要依赖响应返回的标签是否带ID。
• 在componentDidMount中，先把HTML片段转成fragment，再提取其中的meta标签，添加到head的同时存入数组。
• 组件卸载时（componentWillUnmount），遍历数组中的每个节点，检查它还在head里的话就移除，避免重复移除报错。

如果是函数组件，逻辑类似，用useRef来存储节点数组，在useEffect的清理函数中执行移除操作：

import React, { useEffect, useRef } from 'react';

function YourComponent({ headerContent }) {
  const addedMetaTags = useRef([]);

  useEffect(() => {
    if (headerContent) {
      const fragment = window.document.createRange().createContextualFragment(headerContent);
      const metaTags = Array.from(fragment.querySelectorAll('meta'));
      metaTags.forEach(tag => {
        document.head.appendChild(tag);
        addedMetaTags.current.push(tag);
      });
    }

    // 清理函数：组件卸载时移除meta标签
    return () => {
      addedMetaTags.current.forEach(tag => {
        if (tag.parentNode === document.head) {
          document.head.removeChild(tag);
        }
      });
      addedMetaTags.current = [];
    };
  }, [headerContent]);

  return <div>...</div>;
}

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