reactjs - 在 Nextjs/React 应用程序中实现 Facebook Sdk 评论插件

Question

我已经实现了评论插件，并且通过自定义挂钩可以正常工作。

但是，当使用 Next Link 在页面之间导航时，不会加载评论。所以，我实施了一个hack来重新加载页面，但这不是理想的解决方案。

对 React/NextJs 有更深入了解的人可以帮助我提供更清洁、性能更好的解决方案吗？

使用 Facebook.js

import { useEffect } from 'react';

const useFacebook = ({ addTrack }) => {

  useEffect(() => {
 
    const facebookScript = document.createElement("script");

    facebookScript.id = 'fb-sdk';
    facebookScript.async = true;
    facebookScript.defer = true;
    facebookScript.crossOrigin = "anonymous";
    facebookScript.nonce = "5JOEwLPT";
    const track = addTrack ? `&appId=${process.env.NEXT_PUBLIC_FACEBOOK_ID}&autoLogAppEvents=1` : '';
    facebookScript.src = `https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v10.0${track}`;

    document.body.appendChild(facebookScript);

    const href = window.location.href;
    if (href.indexOf('refresh') <= 0) {
      window.location.href = href+'?refresh';
    }

    return () => {
      document.body.removeChild(facebookScript);
    }
  }, [addTrack]);
};

export default useFacebook;

index.js

import Head from 'next/head';
import FBComments from '../components/facebook/FBComments';
import useFacebook from '../hooks/useFacebook';
import styles from '../styles/Home.module.css';

export default function Home({ posts }) {

  useFacebook({ addTrack: false });

  return (

      <main className={styles.main}>
        
        <ul>
          
          { posts && posts.map(post => (
              
                <li key={post.id}>
                  
                    <h1>{post.title}</h1>

                    <FBComments 
                      href={ `http://localhost:3000/post/${post.id}` } 
                      numPosts={10}
                      dataLazy={true}
                      width="100%"
                    />

                </li>
            )
          )}

        </ul>

      </main>

  );

}

export async function getStaticProps() {
  
  const posts = [
    { id: 1, title: 'Post 1' },
    { id: 2, title: 'Post 2' },
    { id: 3, title: 'Post 3' },
    { id: 4, title: 'Post 4' },
  ];

  return {
    props: {
      posts,
    },
  };

}

FBComments.js

import React from 'react';
import styles from '../../styles/FBComments.module.css';

const FBComments = ({ width, href, numPosts, dataLazy }) => {
  
  return (
     <>
       
        <div className="fb-comments" data-href={href} data-numposts={numPosts} data-width={width} data-lazy={dataLazy}> 
        </div>

     </>
  );
};

export default FBComments;

相关答案：在以下示例中，建议使用FB.XFBML.parse(); 但我无法让它工作。

facebook社交插件在动态添加时不显示

我的示例项目： https ://github.com/cmdaniel/nextjs-facebook-sdk

标签： reactjsfacebooknext.js