反应器代码中的Facebook Developer API

Question

我的项目中有两个文件

• index.html:包含'app-container',其中reactjs组件挂载
• app.js:具有react组件的文件

我想在我的reactjs应用程序中使用facebook喜欢和分享按钮.但我希望它们只在某些时间出现.

也就是说,我想从reactjs的render()函数中显示它们,而不是永久地在我的html页面上显示它们.

我按以下方式进行 -

1.)我在index.html页面上添加了facebook javascript SDK的链接.

2.)我在render方法中添加了like/share按钮的代码插件.

<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div>

但问题是,即使组件正确安装,/ share按钮也不可见.

任何人都可以指出我应该如何进行？

Answer 1

由于class是保留字,React使用className.以下应该可以解决您的问题

<div className="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>

问题是,如果您键入class=""或其他任何内容,xlink:href=""或其他不受支持的属性名称,它将不会抱怨.它只会将其删除,而您的共享按钮将无法获得它的样式,因此可能会使其在页面上不可见.

如果要使用不受支持的属性名称,dangerouslySetInnerHTML则可以采用.

render: function() {
  var html = '<div class="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>';

  return (
    < div dangerouslySetInnerHTML = {{__html: html}} />
  );
}

如果它仍然不起作用,可能是因为您在Facebook完成解析页面后呈现按钮.在这种情况下,你可以使用FB.XFBML.parse()在componentDidMount().