Facebook 开发者 API 在 reactjs 代码中

Question

我的项目中有两个文件

index.html : 包含 'app-container' 其中 reactjs 组件挂载
app.js : 包含反应组件的文件

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

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

我按照以下方式进行 -

1.) 我在 index.html 页面上将 link 添加到 facebook javascript SDK。

2.) 我在渲染方法中为 like/share 按钮添加了代码插件。

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

但问题是即使组件安装正确，like/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 完成页面解析后才呈现按钮。在这种情况下，您可以在 componentDidMount().

中使用 FB.XFBML.parse()

Facebook 开发者 API 在 reactjs 代码中

Facebook Developer API in reactjs code

facebook-sharer

facebook-like

reactjs

react-jsx