Facebook 评论的 React 钩子 - 预加载

Question

如何使用 React hook 预加载 iframe。

最近我在我的页面上安装了一个 Facebook 评论工具。 https://jackylenghia.com/#/Contact

但是，看起来 iframe 需要预加载（即在旧 React 中的 ComponentDidMount），因此 iframe 不会出现，但您需要刷新页面（F5 或 Cmd + R），以让 iframe 加载。

我该如何使用 React Hook 解决这个问题。我尝试通过使用 useEffect 加载它但没有帮助

原文：

const Contact = (props) => {
  return( 
     ... //Other stuffs

     <Col>
       <div class="fb-comments" data-href="https://jackylenghia.com/#/Contact" data-numposts="5" data-width=""></div>
     </Col>
     ...
  )
}

我试过的

const Contact = (props) => {
  const [fbcomment, setfbcomment] = useState(0);
  useEffect(() => {
    setfbcomment(`<div class="fb-comments" data-href="https://jackylenghia.com/#/Contact" data-numposts="5" data-width=""></div>`);
  });

  return( 
     ... //Other stuffs

     <Col>
       {fbcomment}
     </Col>
     ...
  )
}

但这只是打印出一个文本字符串而已，而不是将元素插入到dom

Answer 1

事实证明，要预加载 iframe，我只需要运行来自 FB JavaScript SDK 的 useEffect:

useEffect (() => {
  FB.XFBML.parse();
});

这将请求 FB 组件在 dom 加载后进行解析。

Facebook 评论的 React 钩子 - 预加载

React hook for Facebook Comment - preload

facebook

node.js

reactjs

react-hooks