可以使用 innerHTML 方法插入 React JSX <Link> 吗？

Question

我的 react 应用中有一些 html (JSX)，如下所示：

<div><h3>Title</h3><p> some message...</p></div>

然后我使用 innerHTML 将它分配给一个名为 msg 的变量，如下所示：

let msg
msg.innerHTML = "<div><h3>Title</h3><p> some message...</p></div>"
//then i append it to my app like this
document.body.appendChild(msg)

现在我想用一个像这样的原生 React Link 元素包围上面的 html

msg.innerHTML = "<Link to"/"><div><h3>Title</h3><p> some message...</p></div></Link>"

当然它不起作用，当它被渲染到页面时它被编译为常规 html 并且不充当反应链接

我怎样才能做到这一点，甚至有可能还是有完全不同的方法来解决这个问题？

我尝试过这样做和许多不同的变化，但没有雪茄：

msg.innerHTML = `${<Link to"/">}<div><h3>Title</h3><p> some message...</p></div>${</Link}`

Answer 1

ReactDOMServer.renderToString 会将 React 元素呈现为其初始 HTML。

...
import ReactDOMServer from "react-dom/server";

export default function App() {
  useEffect(() => {
    const msg = document.createElement("div");
    msg.innerHTML = ReactDOMServer.renderToString(
      <Link to="/">
        <div>
          <h3>Title</h3>
          <p> some message...</p>
        </div>
      </Link>
    );

    document.body.appendChild(msg);
  }, []);

  return null;
}