带有React Web的Facebook SDK

Question

有没有人在您的反应网络（非本机）项目中使用Facebook SDK成功？ 似乎没有任何好的文件。

特别。 我在哪里调用init函数？

 <script>
 window.fbAsyncInit = function() {
 FB.init({
  appId            : 'your-app-id',
  autoLogAppEvents : true,
  xfbml            : true,
  version          : 'v2.9'
});
FB.AppEvents.logPageView();
};

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>

如果我在每个页面上添加它，FB.AppEvents.logPageView（）不会加载/注册回Facebook（调试事件时我看不到它）。 如果我在我的主app.js上添加init代码，然后在单个页面上添加FB.AppEvents.logPageView（），我有时会遇到无法找到FB.AppEvents的控制台错误。

将Facebook SDK集成到反应式Web应用程序中的最佳实践是什么？

Answer 1

你有app-id并在你的代码中设置它吗？ https://developers.facebook.com/apps/

Answer 2

可能有很多方法，我目前正在使用这种方法来做到这一点：

• 在index.html页面中添加用于JavaScript的Facebook SDK，您可以在其中放置整个应用程序组件。 在同一index.html文件中的body标记开始后添加<div id="fb-root"></div> 。

<body><div id="fb-root"></div><div id="root"></div>

 <script>
 window.fbAsyncInit = function() {
 FB.init({
  appId            : 'your-app-id',
  autoLogAppEvents : true,
  xfbml            : true,
  version          : 'v2.9'
});
FB.AppEvents.logPageView();
};

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script></body>

• 安装了应用程序组件后，上面的代码段会初始化window.FB变量。 您可以使用此变量执行window.FB.AppEvents.logPageView()以及访问图形API等任何其他内容。
• 有一个问题可能出现，即组件安装时，工作正常，但一旦，它已卸载，你可以回到这个组件，事情可能无法正常工作，如fb注释或插件。 要解决此问题，您必须在以下行中添加以下行： if (window.FB) {window.FB.XFBML.parse();}在您访问facebook内容的每个组件的ComponentDidMount()生命周期方法中。 安装组件后，它将重新解析dom。