reactjs 代码中的 Facebook 开发者 API

Question

我的项目中有两个文件

• index.html：包含安装reactjs组件的“app-container”
• app.js ：包含 React 组件的文件

我想在我的 Reactjs 应用程序中使用 facebook 的点赞和分享按钮。但我希望它们只在某些时间点出现。

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

我按照以下方式进行-

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

2.）我在渲染方法中添加了“喜欢/分享”按钮的代码插件。

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

但问题是，即使组件安装正确，点赞/分享按钮也不可见。

有人能指出我应该如何进行吗？

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()。

Answer 2

“有时候，我希望能回到童年，那里的生活很简单，没有那么多需要考虑的。”