facebook-like - 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()中。