React如何转换深层嵌套的带data-mini-slug属性的<p>为<input>？

React本身没有直接提供遍历并修改已渲染虚拟DOM树的内置工具，但我们可以通过递归遍历虚拟DOM的方式实现需求，同时完整保留原有的DOM结构和组件逻辑。下面给你两种实用方案：

方案一：递归遍历虚拟DOM（推荐，符合React设计理念） #

核心思路是写一个递归函数，遍历super.render()返回的虚拟DOM树，遇到带data-mini-slug属性的<p>标签就替换为<input>，其他节点原样保留并递归处理子元素。

function hoc(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    // 递归处理单个虚拟DOM节点
    transformNode(node) {
      // 处理空节点
      if (!node) return node;

      // 处理子节点数组（比如多个同级元素）
      if (Array.isArray(node)) {
        return node.map(child => this.transformNode(child));
      }

      // 处理React元素节点
      if (React.isValidElement(node)) {
        // 判断是否是目标<p>标签
        if (node.type === 'p' && node.props['data-mini-slug']) {
          // 替换为<input>，保留原属性+设置默认值
          return React.createElement('input', {
            ...node.props,
            value: node.props.children || '',
            type: 'text'
          });
        }

        // 非目标节点，克隆并递归处理其子节点
        return React.cloneElement(
          node,
          node.props,
          this.transformNode(node.props.children)
        );
      }

      // 文本节点或其他类型，直接返回
      return node;
    }

    render() {
      const elementsTree = super.render();
      return this.transformNode(elementsTree);
    }
  };
}

这个方案完全在虚拟DOM层面操作，不会和React的更新机制冲突，能完美保留原组件的结构、事件和其他属性。

方案二：操作真实DOM（不推荐，仅作参考） #

如果你想直接操作真实DOM，也可以在组件挂载/更新后遍历替换，但这种方式容易和React的虚拟DOM同步逻辑冲突，仅适合简单场景：

function hoc(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    componentDidMount() {
      this.replaceSlugParagraphs();
    }

    componentDidUpdate() {
      this.replaceSlugParagraphs();
    }

    replaceSlugParagraphs() {
      // 获取所有目标<p>标签
      const pTags = this.rootEl.querySelectorAll('p[data-mini-slug]');
      pTags.forEach(p => {
        const input = document.createElement('input');
        input.type = 'text';
        input.value = p.textContent;
        // 复制原<p>的所有属性
        Array.from(p.attributes).forEach(attr => {
          input.setAttribute(attr.name, attr.value);
        });
        // 替换节点
        p.replaceWith(input);
      });
    }

    render() {
      const elementsTree = super.render();
      // 给根元素加ref，方便获取真实DOM
      return React.cloneElement(elementsTree, { ref: el => this.rootEl = el });
    }
  };
}

需要注意的是，组件每次重新渲染后都要重新执行替换逻辑，否则会被React的虚拟DOM更新覆盖。

总结 #

React没有内置的指定元素替换工具，但递归遍历虚拟DOM的方案是最安全、最符合React设计思想的实现方式，能在保持原有结构的前提下完成标签替换。

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