如何在ReactJS文件中正确导入函数

Question

我无法在react中导入函数。 我使用export default导出功能。 但是，导入后，我尝试将其绑定到render函数中，但出现错误，提示TypeError: Cannot read property 'bind' of undefined 。 这是否意味着函数未正确导入？ 如何在React中正确导入它？

import  onSignUp  from '../../functions/onsignup'
    class ModalExample extends React.Component {
    constructor(props) {
        super(props);
    }

     this.onSignUp=this.onSignUp.bind(this);
    }
    render(){
    return(...)
    }

Answer 1

看来您那里还有一个括号，而且，导入的功能将只是onSignUp而不是this.onSignUp 。

import  onSignUp  from '../../functions/onsignup'

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
    this.onSignUp = onSignUp.bind(this);
  }

  render(){
    return(...)
  }
}

您应该在ctor绑定该函数，或者在类onSignup其分配给onSignup如下所示：

import  onSignUp  from '../../functions/onsignup'

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
  }

  onSignUp = onSignUp.bind(this);

  render(){
    return(...)
  }
}

（我认为）

Answer 2

这是否意味着函数未正确导入？

可能是的。

如何在React中正确导入它？

从'./directorypath';导入'./directorypath'; //如果使用默认导出

从'./directorypath';导入{ './directorypath'; } './directorypath'; //如果导出时未使用默认值。

该组件的代码片段将更好地说明问题。

Answer 3

也许你可以把你的声明在构造函数中这样提及onSignUp你进口，而不是this.onSignUp不存在：

constructor(props) {
    super(props);
    this.onSignUp = onSignUp.bind(this);
}

Answer 4

您可以在onSignUp文件中向我们展示该功能吗？ 您可能不需要根据其功能来绑定它，但是...

this.onSignp = this.onSignUp.bind（this）;

在构造函数中执行此操作将假定您正在初始化一个新函数，而不是要导入的函数，请改用此函数。

this.onSignp = onSignUp.bind(this);

并确保从声明位置正确定义它

Answer 5

如果要从React类外部导入函数，则无需在React类内部绑定该函数。 您只需导入并使用它。 参见下面。

功能/ onsignup.js

函数定义并在此处导出。

const onSignUp = () =>{
// function code here
}

export default signup;

ModalExample.js

在此处导入功能并使用。

import React, {Componenet} from 'react';
import  onSignUp  from '../../functions/onsignup'

class ModalExample extends React.Component {
    constructor(props) {
        super(props);
    }


    render(){
      return(
         <button onClick={()=>onSignUp()} />
      )
    }
}