React Facebook Login组件页面加载自动弹出问题咨询

嘿，刚接触React就能上手第三方登录组件已经很棒啦！你遇到的这个情况不是库的异常行为，完全是代码里一个小属性导致的——就是你加在FacebookLogin上的autoLoad。

为什么会自动弹窗/登录？ #

• 在JSX里，单独写autoLoad就相当于设置autoLoad={true}，这个属性的作用就是：组件一挂载（页面刷新后组件加载完成），就自动触发Facebook的授权流程。所以你刷新页面时，弹窗会自动弹出来；如果已经登录过Facebook且之前授权过这个应用，就会直接完成登录并返回用户信息。
• 你参考的视频里弹窗被Chrome拦截，是因为浏览器的弹窗拦截规则：非用户主动点击触发的弹窗（比如页面加载自动触发的）会被判定为“非必要弹窗”，大概率会被拦截。你的本地环境可能暂时没触发拦截逻辑，所以弹窗直接显示出来了。

怎么解决？ #

很简单，把autoLoad属性删掉就可以了！另外还要注意，你之前按钮的onClick写的是自己的console.trace()，其实应该调用renderProps.onClick，不然点击按钮不会触发FB的登录流程哦。修改后的代码如下：

import React from 'react';
import { FACEBOOK_ID } from '../../../config/credentials';
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';

const responseFacebook = response => {
  console.log(response);
};

const FacebookLoginButton = () => (
  <div>
    <FacebookLogin 
      appId={FACEBOOK_ID} 
      callback={responseFacebook} 
      render={renderProps => (
        <button onClick={renderProps.onClick}>Login via FB</button>
      )} 
    />
  </div>
);

export default FacebookLoginButton;

这样修改后，只有当用户主动点击“Login via FB”按钮时，才会触发Facebook的授权弹窗，不会再出现页面刷新自动触发的情况啦。

内容的提问来源于stack exchange，提问作者Cedric