我想在下一个 js 中从 JSON 加载特定数据后加载脚本

发布于 2025-01-11 12:38:59 字数 460 浏览 0 评论 0原文

我想在 HTML 中加载 data.post.content 后加载 Script 标签。

基本上，我想在 HTML 中运行 MathJax.js 脚本。

我的代码：

return (
    <div>
      <h1>{data.post.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
      <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>
    </div>
  );

如果我重新加载页面，我的脚本就可以工作

原文

I want to load Script tag after data.post.content is loaded inside HTML.

Basically, I want to run the MathJax.js script inside HTML.

My code:

return (
    <div>
      <h1>{data.post.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
      <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>
    </div>
  );

My Script is working if I reload the page

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

燃情 2025-01-18 12:38:59

这里的问题是您正在使用客户端渲染填充 Script （服务器端渲染很好，因为数据已经加载到服务器上）。

您可以尝试这种方式来修复（下面的代码片段），但是通过这种方式，您需要在 UI 重新渲染的状态中设置 data.post.content

return (
    <div>
      <h1>{data.post.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
      {data.post.content && <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>}
    </div>
  );

The problem here is you're populating Script with client-side rendering (server-side rendering is good because data is loaded already on the server).

You can try this way to fix (below snippet), but with this way, you need to set data.post.content in states for UI re-rendering

return (
    <div>
      <h1>{data.post.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
      {data.post.content && <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>}
    </div>
  );

回复收藏 0 原文

~没有更多了~