React JS正在加载FB共享
我正在尝试将facebook分享添加到我的react应用程序中。关于添加FB.XFBML.parse()有很多关于堆栈溢出的细节
无论如何，我都会出现"FB未定义“的错误。加载FB的最好方法是什么？
编辑
已添加window.fbAsyncInit函数。
"use strict";
var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ThanksPage = React.createClass({
componentDidMount: function() {
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.XFBML.parse();
};
},
render: function() {
return (
);
}
});
module.exports = ThanksPage;回答 3
Stack Overflow用户
发布于 2016-06-16 09:43:03
只能在FB.init之后使用FB
componentDidMount() {
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.6'
});
//JS SDK initialized, now you can use it
FB.XFBML.parse();
};
//load the JavaScript SDK
(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'));
}另外，一定要在服务器上使用它(public或localhost)，不要只在浏览器中打开html文件。你也应该考虑把Facebook的东西放在一个单独的文件中，这样你就可以在以后的项目中使用它。但首先，要确保它正常工作，并确保您理解正在发生的事情。
请记住，您可能也需要在componentDidUpdate中使用FB.XFBML.parse。您必须确保已经为此加载了JS SDK。componentDidMount只会被调用一次，如果你转到另一个路由并返回到这个组件，它将被缓存，你需要再次解析社交插件。
更多关于JS的信息：http://www.devils-heaven.com/facebook-javascript-sdk-login/
您可以通过在文件的头部使用 /*global FB*/ ，或者(更好的)通过在.eslintrc文件中定义FB (如果使用ESLint)来消除内联错误：
"globals": {
"FB": true
}Stack Overflow用户
发布于 2016-06-16 08:57:07
您正在尝试执行
FB.init();
FB.XFBML.parse();当SDK甚至没有加载时，当然，你会得到未定义的引用错误。
你错过了回调
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};这段代码异步加载SDK，这样它就不会阻止加载页面的其他元素。这对于确保用户和SEO机器人快速加载页面尤为重要。
上面代码中的URL是协议相关的。这允许浏览器通过与包含页面相同的协议(HTTP或HTTPS)加载SDK，这将防止“不安全内容”警告。
分配给window.fbAsyncInit的函数在SDK加载后立即运行。您希望在加载SDK之后运行的任何代码都应放在此函数中，并放在调用FB.init之后。例如，您可以在这里测试用户的登录状态或订阅您的应用程序感兴趣的任何Facebook事件。
此外，您应该在加载SDK之前设置回调
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));Stack Overflow用户
发布于 2018-01-18 16:35:25
如果你想在你的react页面上添加任何社交分享按钮，那么你可以尝试npm module react-share，与FB、Twitter等的原生API相比，它非常容易。
https://samvikshana.weebly.com/blog/react-share-social-share-widgets上的react-share示例代码片段
https://stackoverflow.com/questions/37853918
复制相似问题
腾讯云开发者
