如何在React组件或非默认URL插入Facebook点赞按钮并解决渲染异常

问题原因 #

Facebook SDK 加载完成后只会在页面首次加载时自动扫描一次全局DOM，识别带有fb-like类的Facebook插件元素并完成渲染。React前端路由跳转属于客户端无刷新渲染，新页面的fb-like元素是动态插入DOM中的，此时SDK不会自动触发二次扫描，因此按钮无法渲染。只有手动刷新页面触发SDK重新初始化扫描后，按钮才会正常显示。

可行解决方案 #

在放置点赞按钮的组件挂载完成后，手动调用FB SDK提供的FB.XFBML.parse()方法，触发SDK重新扫描当前DOM中的Facebook插件元素即可。

基础实现（函数组件） #

如果SDK加载速度快于组件挂载，直接在组件的useEffect钩子中调用解析方法即可：

import { useEffect } from 'react';

function ItemDetail() {
  useEffect(() => {
    // 确认FB SDK已挂载到全局后调用解析
    if (window.FB) {
      window.FB.XFBML.parse();
    }
  }, []);

  return (
    {/* 组件其他代码 */}
    <div className="fb-like" 
         data-href="http://localhost:3000/something" 
         data-width="" 
         data-layout="standard" 
         data-action="like" 
         data-size="small" 
         data-share="true">
    </div>
  )
}

兼容SDK未加载完成的场景 #

如果存在组件挂载时SDK还未加载完成的情况，你可以新增SDK加载完成的监听事件：

1. 修改index.html中的SDK引入代码，添加初始化回调：

<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
        version: 'v11.0'
      });
      // 触发SDK加载完成的自定义事件
      window.dispatchEvent(new Event('fb-sdk-ready'));
    };
  </script>
  <script async defer crossOrigin="anonymous" 
          src="https://connect.facebook.net/en_US/sdk.js" nonce="pyP98Sf3"></script>
  <!-- 其他原有代码 -->
</body>

2. 调整组件内的useEffect逻辑，增加加载事件监听：

useEffect(() => {
  const parseFbLike = () => window.FB && window.FB.XFBML.parse();

  if (window.FB) {
    parseFbLike();
  } else {
    window.addEventListener('fb-sdk-ready', parseFbLike);
  }

  // 组件卸载时清除事件监听，避免内存泄漏
  return () => window.removeEventListener('fb-sdk-ready', parseFbLike);
}, []);

注意：如果每个详情页的点赞链接data-href是动态生成的，需要将动态链接参数添加到useEffect的依赖数组中，保证链接变化时会重新渲染对应点赞按钮。

内容的提问来源于stack exchange，提问作者Afshan Navazdeen