javascript - 如何在 React 组件中使用 Facebook 开发者网站的 Facebook 登录按钮？

Question

我有一个前端带有 React 的 Ruby on Rails 应用程序，我想向其中添加 Facebook 身份验证。我正在遵循文档 here使用 JavaScript SDK 进行 Facebook 网页登录。有一次它说:

Including the Login Button into your page is easy. Visit the documentation for the login button and set the button up the way you want. Then click Get Code and it will show you the code you need to display the button on your page.

上述文档是here 。在后一个链接上，有一个“插件配置器”，您可以在其中

set the button up the way you want

。当我点击“获取代码”时，系统指示我:

1) 将此代码粘贴到我的 html 页面的开始正文标记之后:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=myAppId";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2)“将插件的代码放置在您希望插件出现在页面上的任何位置。”，代码为:

<强> <div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>

我将后一段代码粘贴到我的 Reactjs 应用程序中，位于组件的渲染函数内。我希望这会给我一个已经设计好的 Facebook 按钮。我什么也没得到。

当我将这段代码直接粘贴到我的 application.html 模板中时，我确实看到了该按钮。因此，我猜测这是 React 组件的 JSX 代码内部的代码问题。

如何在 Reactjs 应用程序中使用 facebook 登录按钮？

Answer 1

因为您希望 fb 提供的 html 片段完全按原样呈现，所以您需要使用 dangerouslySetInnerHTML 插入原始 HTML。否则，react 会欺骗 html，这就是我怀疑导致问题的原因(正如您将 html 粘贴在任何 React 组件之外的实验所证明的那样)

有关执行此操作的更多信息，请参见:http://facebook.github.io/react/index.html (请参阅登陆页面上的最后一个示例)和 https://facebook.github.io/react/tips/dangerously-set-inner-html.html

仅供引用，如果您刚刚构建此应用程序并且在 Rails 中，您可能需要查看 http://reactrb.org