React组件替换<div>为<span>解决<div>不能作为<p>子元素报错

你的React组件会渲染包含<div hidden></div>的HTML内容，当把这个组件放在<p>标签内使用时，出现报错：<div> cannot appear as a descendant of <p>，需要将目标<div hidden></div>替换为<span hidden></span>，以下是几种可行的解决方式：

• 直接修改组件JSX代码
  如果这个<div hidden></div>是你手写的JSX结构，直接把标签改成<span hidden></span>就搞定了，这是最简单直接的办法。
  示例代码：

// 原代码
return (
  <div>
    {/* 其他内容 */}
    <div hidden></div>
  </div>
);

// 修改后
return (
  <div>
    {/* 其他内容 */}
    <span hidden></span>
  </div>
);

• 处理HTML字符串渲染场景
  如果是通过dangerouslySetInnerHTML渲染的富文本/HTML字符串，用正则表达式替换目标标签即可：

const htmlContent = '<div hidden></div>这里是其他内容';
// 全局替换目标div为span
const modifiedHtml = htmlContent.replace(/<div hidden><\/div>/g, '<span hidden></span>');

return (
  <p dangerouslySetInnerHTML={{ __html: modifiedHtml }} />
);

• 动态DOM元素替换
  如果这个<div hidden></div>是组件运行时动态生成的，用useEffect结合DOM操作替换：

import { useEffect, useRef } from 'react';

function YourComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // 找到所有带hidden属性的div
      const targetDivs = containerRef.current.querySelectorAll('div[hidden]');
      targetDivs.forEach(div => {
        const span = document.createElement('span');
        span.setAttribute('hidden', '');
        // 用span替换原div
        div.replaceWith(span);
      });
    }
  }, []);

  return (
    <div ref={containerRef}>
      {/* 组件原有内容，包含动态生成的<div hidden></div> */}
    </div>
  );
}

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