如何向React自定义popover Hook传入HTML/JSX并在组件内安全渲染

你提到的传入HTML字符串再解析的实现方式不推荐，该方案存在XSS安全风险，且无法直接渲染自定义React组件（如图标组件）。下面是两种合规的实现方案：

最佳实现：直接传递JSX作为参数 #

React本身支持将JSX元素、组件实例作为值传递，你可以直接将需要展示的popover内容作为showPopover的第二个参数传入，无需任何字符串转换：

<a 
  href={url} 
  onMouseEnter={(e) => showPopover(e.target, (
    <div>
      <InfoIcon />
      <p>带自定义图标的提示文本</p>
      <div className="custom-block">自定义样式的div区块</div>
    </div>
  ))} 
  onMouseLeave={() => showPopover(false)}
>
  Hover me
</a>

对应的自定义Hook内部，直接把接收的内容当成正常JSX渲染即可：

// usePopover Hook内部的popover渲染逻辑示例
const Popover = () => {
  if (!isVisible || !popoverContent) return null
  return createPortal(
    <div className="popover" style={position}>
      {/* 直接渲染传入的内容 */}
      {popoverContent}
    </div>,
    document.body
  )
}

该方案的优势：

• 符合React原生渲染逻辑，无需引入额外的解析库
• 天然规避XSS安全风险，不需要做HTML消毒处理
• 支持任意自定义组件、原生HTML标签渲染，可正常绑定事件、传递props

仅传文本+自定义样式的方案 #

如果你希望只传入纯文本参数，额外控制内容样式，可以通过预设模板的方式实现：
调用时传入文本和样式配置项：

onMouseEnter={(e) => showPopover(e.target, '普通提示文案', {
  type: 'warning', // 预设提示类型，自动匹配对应图标和基础样式
  wrapperClass: 'custom-popover' // 自定义外层类名
})}

Hook内部根据配置渲染预设模板：

// Hook内部预设模板映射
const templateMap = {
  info: (text, config) => (
    <div className={`popover-info ${config.wrapperClass}`}>
      <InfoIcon />
      <p>{text}</p>
    </div>
  ),
  warning: (text, config) => (
    <div className={`popover-warning ${config.wrapperClass}`}>
      <WarningIcon />
      <p>{text}</p>
    </div>
  )
}

// 渲染时匹配对应模板
{templateMap[config.type]?.(text, config) || <p>{text}</p>}

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