我是第一次为我的应用尝试 Facebook 身份验证。我可以通过教程让它正常工作，我可以使用方便的 Facebook 登录按钮登录用户并注销他们，如 Facebook SDK 文档中的示例所示:

https://developers.facebook.com/docs/facebook-login/web

我喜欢使用这个按钮，因为它很简单，可以自动订阅 Facebook 品牌要求，而且当用户登录时它会自动成为 Facebook 注销按钮。各方面都很完美。以下是包含自动注销功能的按钮代码的外观:

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();"> 
</fb:login-button> 

看起来就像肉汁，直到我在 ReactJS 页面中尝试它。

// From the tutorials 
<script type='text/babel'> 
  var CommentBox = React.createClass({ 
    render: function() { 
      return ( 
        <div className="commentBox"> 
          Hello, world! I am a CommentBox.<br /> 
          // MY ADDITION ... it breaks 
          <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"> 
          </fb:login-button> 
        </div> 
      ); 
    } 
  }); 
  ReactDOM.render( 
    <CommentBox />, 
    document.getElementById('content') 
  ); 
</script> 

我也尝试过这样:

ReactDOM.render( 
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>, 
    document.getElementById('loginbutton') 
); 

我无法以这种方式包含 FB SDK 登录按钮，因为它显示“JSX 不是 XML”。我想这很公平。

有什么方法可以在 React 页面中包含这个方便的按钮，还是我只需要创建一个自定义 FB 按钮？我本以为这似乎是一个常见的用例，而且自从 Facebook 为我们提供了 React 以来，我很惊讶我找不到更轻松地使用这个解决方案的方法。 (制作自定义按钮并不是世界末日，但我想知道是否有更好/更简单的方法。)

请您参考如下方法:

使用 Facebook 提供的代码生成器:

https://developers.facebook.com/docs/facebook-login/web/login-button

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true"></div> 

请注意，为了与教程中演示的 Facebook SDK onlogin 功能配合使用，您需要添加一个自定义属性来链接该功能，例如:

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true" data-onlogin="checkLoginState();"></div> 

此外，代码生成器将为 SDK 引导过程提供比默认教程中给出的更多规范。因此，而不是教程提供的代码:

// This won't work w/ custom <div ...> login buttons 
(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"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

您需要在代码生成器中使用更像这样的东西:

(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.8&appId=YOUR-APP'S-ID"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

这将确保使用正确版本的 SDK(例如 2.8 与 2.5)一切顺利，这样您就不会因包含自定义版本的 FB SDK 登录按钮而出现大量控制台错误。