如何解决可以使用innerHTML方法插入React JSX <Link>吗?
我的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>"
当然它不起作用,并且在将其呈现为页面且不充当React链接时会编译为常规html
我如何实现这一目标,甚至有可能还是完全不同的方式来解决此问题?
我尝试这样做,并且做出了许多不同的变化,但没有雪茄:
msg.innerHTML = `${<Link to"/">}<div><h3>Title</h3><p> some message...</p></div>${</Link}`
解决方法
有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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。