将元素附加到现有元素 React

Question

我正在使用 SurveyJs 创建调查。为此，我希望创建一个按钮以添加到每个问题标题。我已经能够使用 Javascript 执行以下操作，但我希望基本上使用 React 执行相同的操作。

呈现调查效果很好，所以我认为不值得展示它。下面是每题渲染时的回调函数。以下工作正常：

const onAfterRenderQuestion = (survey, options) = {
  // create the button
  const btn = document.createElement("button")
  btn.innerHTML = "Click me!"

  // define what the button should do
  btn.onClick = function () {
    // do whatever
  }

  // get the question title from the survey and append the button to the end of it
  let header = options.htmlElement.querySelector("h5")
  if (!header) header = options.htmlElement
  header.appendChild(btn)
}

上面的代码运行良好，如您所见，它使用了 Javascript。但是，我正在尝试使用 React 做完全相同的事情，但我做不到。现在，我得到了这个：

// create the button component
const myButtonElement = (
  <Button onClick={() => {*call some function*}}
)    

let header = options.htmlElement.querySelector("h5")
if (!header) header = options.htmlElement

// create the entire component
const questionTitle = React.createElement("div", {}, header)
const buttonElement = React.createElement("div", {}, myButtonElement)

const titleWithButton = React.createElement("div", {}, [questionTitle, buttonElement])

ReactDOM.render(titleWithButton, document.getElementById(options.question.id))

但是上面的代码会导致以下错误：

Error: Objects are not valid as a React child (found: [object HTMLHeadingElement]). If you meant to render a collection of children, use an array instead.

即使不熟悉 Surveyjs，我如何使用 React 简单地将元素附加到现有元素，类似于我已经使用 Javascript 完成的方法？

Answer 1

这是因为 header 是一个 HTML 元素，而 React 期望第三个参数是一个 React 元素。

  let header = options.htmlElement.querySelector("h5")
  if (!header) header = options.htmlElement

  const questionTitle = React.createElement("div", dangerouslySetInnerHTML: {__html: `<h5>${header.innerHTML}</h5>` })

HTML 编写在 JSX 中不是原生的 HTML 组件。这些是由 React 团队开发的，以模仿 HTML 并且是 React 组件。

将元素附加到现有元素 React

Append Element to an Existing Element React

html

javascript

reactjs

react-native

surveyjs