通过类名(ReactJS)隐藏的Facebook Social Plugins评论部分 [英] Facebook Social Plugins comments section hidden by classname (ReactJS)
问题描述
我正在使用ReactJS(由Facebook开发)，目前遇到显示来自Facebook Social Plugins的Comment secton的问题...具有讽刺意味，但是，嘿，他们还没有自己制作插件来进行反应.
I'm using ReactJS (developped by Facebook) and I'm currently having issues displaying a Comment secton from Facebook Social Plugins... kind of ironic but hey, they haven't made a plugins themselft for react.
无论如何，我已经在代码中插入了diffent元素以添加注释部分.加载页面时，我可以看到该部分正在加载！ (不到一秒钟)，但它很快消失了.我检查了facebook生成的代码，发现它添加到了我的元素的类中:FB_hide_iframes.我尝试将其删除，然后该部分显示在我的页面中！
Anyway, I have inserted the diffent element in my code to add the comment section. When I'm loading the page, I can see the section is loading! (for less than a second) but it desappear quite rapidly. I checked the code generated by facebook and I found that it was adding in the class of my element : FB_hide_iframes. I tried removing it and the section was showing in my page!
问题是我不知道如何控制添加到组件中的类.
The problem is that I don't know how to control the class added to my component.
如您所见，注释部分存在，但被FB_hide_iframes类隐藏了我还没放在那里.
这是在我的主页(home.js)中添加该部分的代码
Here's the code to add the section in my home page (home.js)
componentDidMount() {
...
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6'
});
};
(function (d, s, id) {
console.log('test');
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
const js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/fr_CA/sdk.js#xfbml=1&version=v2.6&appId=XXXXXXXX';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();
...
}
，并且在我添加的渲染功能中:
and in the render function I added :
render() {
<div id="fb-root"></div>
...
<div className="fb-comments"
data-href="MY-URL"
data-width="1000"
data-numposts="10"
data-order-by="reverse_time">
</div>
有人知道吗?
显示了评论部分，但是当我进入网站的另一部分并复出(单页应用程序)时，它消失了. 这是我组件的代码:
The comments section is showing, but when I go in another section of my website and comeback (Single-page App), it Disappears. Here's the code of my component :
import React, { Component, PropTypes } from 'react';
import { mediaQueries } from '../../decorators';
@mediaQueries
export default class FacebookComments extends Component {
static propTypes = {
mediaQueries: PropTypes.func.isRequired,
appId: PropTypes.string.isRequired,
version: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
};
state = {
mobile: false,
}
componentDidMount() {
this.props.mediaQueries('(max-width: 950px)', () => {
this.setState({
mobile: true,
});
});
this.props.mediaQueries('(min-width: 951px)', () => {
this.setState({
mobile: false,
});
});
FB.init({
appId: 'XXXXXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6',
});
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
const js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
componentDidUpate() {
FB.XFBML.parse();
}
render() {
const componentWidth = this.state.mobile ? '95%' : '75%';
return (
<div style={{ width: componentWidth }}>
<div id="fb-root"></div>
<div className="fb-comments"
data-href={this.props.url}
data-width="100%"
data-numposts="10"
data-order-by="reverse_time">
</div>
</div>
);
}
}
luschn我不知道，也不明白您在说什么.我将console.log放在fbAsyncInit中，但从未显示过，这意味着它从未被调用过.我在网上查看，没有任何信息.网上的人只说:在您的代码中输入代码，然后让魔术发生..... 这就是为什么我从代码中删除它的原因. 编辑#2:我对Facebook Social Plugin的所有操作都在此代码中.
luschn I don't know and don't understand what you are saying. I put a console.log in fbAsyncInit and it never showed, which mean it never get called. I looked online and there's no information about it. People online only say : Put that in you code and let the magic happen..... That's why I removed it from my code. Edit #2 : All I have for Facebook Social Plugin is in this code.
推荐答案
侧面注意:在componentDidMount中添加JS SDK初始化代码是一个糟糕的主意.而是，将该代码添加到您的基本HTML中，或将其放在单独的"init"函数中，并在使用该组件之前确保已将其加载.
Side Note: It is a terrible idea to add the JS SDK init code in componentDidMount. Instead, add that code to your base HTML or put it in a separate "init" function and make sure it´s loaded before using the component.
无论哪种方式，您都只能在FB.init之后使用FB.XFBML.parse-即，在加载和初始化JS SDK时:
Either way, you can only use FB.XFBML.parse after FB.init - that is, when the JS SDK is loaded and initialized:
FB.init({
appId: 'XXXXXXXXXXXXXX',
xfbml: true,
version: 'v2.6'
});
FB.XFBML.parse();
您甚至应该在浏览器的鞋垫上出现警告或错误，提示您当前代码未定义FB.
You should even have a warning or error in the browser onsole that FB is not defined with your current code.
您可能还需要在componentDidUpdate中再次致电FB.XFBML.parse().
You may also need to call FB.XFBML.parse() again in componentDidUpdate.
话虽如此，这是我的想法:
That being said, here´s my idea of it:
componentDidMount() {
window.fbAsyncInit = () => {
FB.init({
appId: 'xxx',
xfbml: true,
version: 'v2.6'
});
FB.XFBML.parse();
console.log('make sure this happens');
};
(function(d, s, id){
let 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'));
}
componentDidUpdate() {
FB.XFBML.parse();
}
同样，您应该将init/加载内容放在其他地方，但这仅仅是为了优化.检查您的浏览器控制台是否有错误，可能在初始化JS SDK之前调用componentDidUpdate.在这种情况下，您可能需要检查FB是否可用:
Again, you should put that init/loading stuff elsewhere, but that´s just for optimization. Check your browser console for errors, it may be possible that componentDidUpdate gets called before the JS SDK is initialized. In that case, you may need to check if FB is available:
componentDidUpdate() {
if (FB) {
FB.XFBML.parse();
}
}
或者，您可以使用状态变量(例如，"isSDKInitialized")，然后在FB.init之后将其设置为true:
Alternatively, you could use a state variable ("isSDKInitialized", for example) and set it to true after FB.init:
componentDidUpdate() {
if (this.state.isSDKInitialized) {
FB.XFBML.parse();
}
}
这是您所需要的最低要求，路由问题是componentDidUpdate和componentDidMount都不会被调用.另外尝试使用componentWillReceiveProps(与componentDidUpdate中的代码相同以刷新社交插件).
That´s the minimum you need, the problem with routing is that both componentDidUpdate and componentDidMount will not get called. Try with componentWillReceiveProps in addition (same code as in componentDidUpdate to refresh the Social Plugins).
查看这些链接以获取更多信息-假设您使用的是react-router:
Check out those links for more information - assuming you are using react-router:
- https://github.com/reactjs/react-router/issues/527
- https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
- https://github.com/reactjs/react-router/issues/527
- https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
这篇关于通过类名(ReactJS)隐藏的Facebook Social Plugins评论部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
