Javascript 将DOM元素转换为反应组件

我有一些HTML（源代码是markdown），它包含一些自定义标记。现在我使用jQuery转换自定义标记，但是最好将DOM元素转换为React组件（类似于Angular指令）

下面是一个人为的例子：

<!-- input -->
<question>What is the meaning of life?</question>

<!-- output -->
<div class="Question">
   <strong>What is the meaning of life?</strong>
   <input type="text">
</div>

生命的意义是什么？
生命的意义是什么？

我创建了进行转换的。我采取了这种做法：

let questions = $("question");

class Question extends React.Component {
  render() {
    return (
      <div className="Question">
        <strong>{this.props.text}</strong>
        <input type="text" />
      </div>
    );
  }
}

let i = 0;
$.map(questions, question => {
  $(question).replaceWith(`<div id="question${i}"></div>`)
  let replaced = document.getElementById(`question${i}`);
  ReactDOM.render(<Question text={question.innerText} />, replaced)
  ++i;
})

let questions=$（“问题”）；
类问题扩展了React.Component{
render（）{
返回(
{this.props.text}
);
}
}
设i=0；
$.map（问题，问题=>{
$（问题）。替换为（``）
let replaced=document.getElementById（`question${i}`）；
ReactDOM.render（，已替换）
++一,；
})

我只是天真地想了想，我试图找出其他人是否也采取了类似的方法，但什么也找不到

---

这是个坏主意吗？是否有将DOM（或字符串）转换为React组件的最佳做法？

为什么需要这样做？因为源代码是字符串（标记）。自定义标记增加了交互性，如单击/更正答案时显示/隐藏一些其他元素等。通常会改变状态（课程中的进度）。我想捕获状态，这样用户可以在返回课程时选择离开的位置。相关：和