如何在React中向Surveyjs现有问题标题元素追加自定义按钮

错误原因 #

你报错的核心原因是：React 不支持将原生 DOM 对象（你代码里的header是浏览器原生的HTMLHeadingElement实例）直接作为 React 子元素渲染，因此抛出了对应异常。你不需要用 React 重构已经存在的标题 DOM 结构，只需要将 React 编写的按钮挂载到目标位置即可，和原生 JS 追加元素的逻辑完全对齐。

正确实现代码 #

React 18+ 版本 #

import { createRoot } from 'react-dom/client';

const onAfterRenderQuestion = (survey, options) => {
  // 取标题节点的逻辑和原生写法完全一致
  let header = options.htmlElement.querySelector("h5")
  if (!header) header = options.htmlElement

  // 创建按钮的挂载容器，追加到标题末尾
  const btnMountContainer = document.createElement('span')
  header.appendChild(btnMountContainer)

  // 你的React按钮组件
  const CustomButton = (
    <Button onClick={() => {
      // 在这里写按钮点击的业务逻辑
    }}>
      Click me!
    </Button>
  )

  // 把React按钮渲染到刚才创建的容器里
  const root = createRoot(btnMountContainer)
  root.render(CustomButton)
}

React 17 及更早版本 #

import ReactDOM from 'react-dom';

const onAfterRenderQuestion = (survey, options) => {
  let header = options.htmlElement.querySelector("h5")
  if (!header) header = options.htmlElement

  const btnMountContainer = document.createElement('span')
  header.appendChild(btnMountContainer)

  const CustomButton = (
    <Button onClick={() => {
      // 点击逻辑
    }}>
      Click me!
    </Button>
  )

  ReactDOM.render(CustomButton, btnMountContainer)
}

可选优化 #

如果问卷存在动态销毁、重新渲染问题的场景，可以在对应销毁钩子中调用root.unmount()（React18）或者ReactDOM.unmountComponentAtNode(btnMountContainer)（React17及更早），避免内存泄漏。

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