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 完成页面解析后渲染按钮。在这种情况下，您可以在componentDidMount() 中使用FB.XFBML.parse()。