Gatsby <div> 仅在刷新时出现

Question

我使用 Netlify 片段注入功能在我的网站中注入了一个脚本，并使用 div

访问它

<div data-mantis-zone="captain-jack"></div>

当我从家导航到 <div> 所在的博客 post 时，它仅在我刷新页面时加载。

当我来自不同的页面时，有没有办法强制 Gatsby 刷新 div？

Answer 1

这不是故意的，这是一种奇怪的行为，但你可以使用 useEffect + useState 钩子。

const YourPage = ()=>{
  const [emptyState, setEmptyState]=useState("");

  useEffect(()=>{
    setEmptyState(" ");
   
  }, [])

return <div>
    <div data-mantis-zone={`captain-jack ${emptyState}`}></div>
</div>

}

一旦 useEffect 被触发（加载 DOM 树时），此代码段将强制 <div> 重新水化。由于 <div> 持有的状态因 useEffect 钩子而改变。

总的来说，这是一种肮脏的方法，您应该调试为什么不在 Netlify 中加载该脚本并找到更好的解决方案。

Gatsby <div> 仅在刷新时出现

Gatsby <div> appears only on refresh

reactjs

gatsby

netlify