React - 从另一个组件调用类函数 - “不是函数”

Question

我有一个带有 'signIn()' 函数的 'Auth' 类，我试图从“Login”组件调用该函数，当它尝试使用“中的回调”时返回错误“不是函数”登录”。

我尝试通过使用道具（如this.props.auth.signIn()）和直接通过调用登录组件中的类（如this.auth）来引用Auth 类/服务，但两者都导致同样的错误。

我正在尝试遵循官方文档中使用的方法，用于 Auth0 的反应样本https://github.com/auth0-samples/auth0-react-samples/blob/embedded-login/02-Custom-Login-Form/src/Login/Login.js。

Auth.js：

import auth0 from 'auth0-js';
import { auth_config } from './auth0-config';
import createHistory from 'history';

export default class Auth {

  auth0 = new auth0.WebAuth({
      ...
  })

  constructor() {
        this.signIn = this.signIn.bind(this);
  }

  signIn(username, password) {
        this.auth0.login(
              {
                    realm: auth_config.dbConnectionName,
                    username,
                    password
              },
              (err, authResult) => {
                    if (err) {
                          console.error('Authentication error at \'services/auth/Auth.js\' - signIn() method:', err);
                          alert(`Error: ${err.description}. Check the console for further details.`);
                    }
              }
        )
  }

Login.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Auth from 'services/auth/Auth.js';

import { Dimmer, Modal, Header, Form, Button } from 'semantic-ui-react';

export default class LoginComponent extends React.Component {

  constructor() {
    super();
    this.state = {
        showModal: true,
        username: null,
        password: null,
        authorised: false
    }
  }

  componentDidMount() {
    console.log('Login.props:', this.props);
  }

  hide = () => {
    console.log('LoginComponent.hide()');
    this.setState({
        showModal: false
    })
  }

  getLoginCredentials() {
    return {
        email: ReactDOM.findDOMNode(this.refs.email).value,
        password: ReactDOM.findDOMNode(this.refs.password).value
    }
  }

  signIn() {
    //   console.log('LoginComponent.signIn(\'' + this.state.username + '\', \'' + this.state.password + '\')');

    const user = this.getLoginCredentials();
    this.props.auth.signIn(user.email, user.password);
  }

Answer 1

您必须创建该类的对象，然后使用该对象您可以在 Login.js 中调用该函数，

signIn() {

    const user = this.getLoginCredentials();
    let signinObj = new Auth();
    signinObj.signIn(user.email, user.password);
  }

编辑：在 router.js 文件中的github page, 中，您可以看到声明，

  <Route path="/login" render={(props) => <Login auth={auth} {...props} />} />

auth 是这个类的对象，作为 props 传递给 Login 类。