React，HTML字符串和组件

Question

说我们有一个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

这不理想。

我意识到这个问题的答案可能会很冗长，因此我对一些一般性提示感到满意。