如何在React組件中使用Facebook開發者網站上的Facebook登錄按鈕？

Question

我有一個Ruby on Rails應用程序，前端有React，我想向其添加Facebook身份驗證。 我正在關注使用JavaScript SDK的Facebook Login for Web上的此處文檔。 一方面它說：

在頁面中包含登錄按鈕很容易。 請訪問有關登錄按鈕的文檔，然后將按鈕設置為所需的方式。 然后單擊獲取代碼，它將顯示您在頁面上顯示按鈕所需的代碼。

前述文檔在這里 。 在后一個鏈接上，有一個“插件配置器”

按您想要的方式設置按鈕

。 當我單擊“獲取代碼”時，系統指示我：

1）在我的html頁面的開頭body標簽之后粘貼以下代碼：

<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應用程序中的組件的render函數中。 我希望這會給我一個已經樣式化的facebook按鈕。 我什么都沒有。

當我直接將這段代碼粘貼到application.html模板中時，我確實看到了該按鈕。 因此，我猜這是代碼在React組件的JSX代碼內部的問題。

如何在Reactjs應用程序中使用Facebook登錄按鈕？

Answer 1

由於您希望fb提供的html代碼段完全按原樣呈現，因此需要使用dangerouslySetInnerHTML地SetInnerHTML插入原始HTML。 否則，react會愚弄html，這就是我懷疑引起問題的原因（如您將html粘貼到任何react組件之外的實驗所證明的那樣）

有關此操作的更多信息： http : //facebook.github.io/react/index.html （請參見登錄頁面上的最后一個示例）和https://facebook.github.io/react/tips/dangerously-set-內中將Html.HTML

僅供參考，如果您只是在構建此應用程序並且遇到麻煩，您可能想簽出http://reactrb.org