React、html字符串和组件

"<p>Australia is the capital of Canada<footnote>No, it isn't</footnote></p>
 <p>Australia's most famous animal<footnote>There are no animals in 
 Australia</footnote> is the panda</p>"

现在假设我们想构建一个react组件,可以将该字符串转换为HTML,将所有脚注元素从 <p> 标记,然后用显示有脚注的标记替换它们。像这样:

<p>Australia is the capital of Canada<a href="footnote-1">[1]</a></p>
<p>Australia's most famous animal<a href="footnote-2">[2]</a>is the panda</p>

...
<span id="footnote-1">No, it isn't</span>
<span id="footnote-2">There are no animals in Australia</span>

把那些脚注抽出来替换掉,那“反应方式”是什么? 是

shouldComponentUpdate() {
  return false;
}
// a whole lot of vanilla javascript

这并不理想。

我知道这个问题的答案可能会很长,所以我很乐意给出一些一般性的提示。