Question

组件组件永远不会被调用，但如果我用回调函数替换调用它的位置console.log(response)，则会调用它。

import React, { Component } from 'react';
import { FacebookLogin } from 'react-facebook-login-component';
import Group from './Groups'

class Login extends Component { 
   render () {

   return (
     <div>
       <FacebookLogin socialId="****************"
                   language="en_US"
                   scope="user_events,user_managed_groups"
                   responseHandler={response => <Group user={response}/>}
                   xfbml={true}
                   fields="id,email,name"
                   version="v2.5"
                   className="facebook-login"
                   buttonText="Login With Facebook"/>
      </div>
    );
  }

}

export default Login;

Answer 1

您的问题是responseHandler prop是一个回调函数而不是渲染函数，因此一旦用户登录就会调用它。

如果要渲染Group组件，则应将状态保存在组件状态，然后有条件地呈现Group组件。

类似的东西：

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }

  handleFBResponse(response){
    this.setState({
      user: response
    });
  }

  render () {

    return (
      <div>
        <FacebookLogin socialId="****************"
                       language="en_US"
                       scope="user_events,user_managed_groups"
                       responseHandler={(response) => this.handleFBResponse(response)}
                       xfbml={true}
                       fields="id,email,name"
                       version="v2.5"
                       className="facebook-login"
                       buttonText="Login With Facebook"/>
        {this.state.user && <Group user={this.state.user}/>}
      </div>
    );
  }
}

Callback函数中的React Component未被调用且不会抛出任何错误

1 个答案: