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

【问题标题】：How to properly import function in a ReactJS file如何在 ReactJS 文件中正确导入函数
【发布时间】：2018-07-27 06:15:09
【问题描述】：

我在导入 react 函数时遇到问题。我使用export default 导出函数。然而，在导入它之后，我尝试将它绑定到渲染函数中，但我收到一条错误消息，提示 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(...)
    }

【问题讨论】：

请同时添加相关代码。
你错误地使用了bind。添加您的代码以获得答案。
尝试在控制台中打印您导入的函数，如果未定义您的函数未正确导入或导出
this.onSignUp这个函数的定义在哪里？它是作为this.onSignUp.bind 访问它的导入函数而不是类函数。你可以像this.onSignUp= onSignUp.bind(this)一样直接使用。

标签： javascript reactjs function

【解决方案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，如下所示：

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

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
  }

  onSignUp = onSignUp.bind(this);

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

（我认为）

【讨论】：

【解决方案2】：

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

可能是的。

如何在 React 中正确导入它？

importexportedFunction from './directorypath';// 如果使用默认导出

import { exportsFunction } from './directorypath'; // 如果在导出时不使用默认值。

组件的代码 sn-p 可以更好地了解问题。

【讨论】：

【解决方案3】：

也许您可以像这样在构造函数中声明您导入的onSignUp，而不是不存在的this.onSignUp：

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

【讨论】：

【解决方案4】：

你能告诉我们 onSignUp 文件中的函数吗？你可能不需要根据它的功能来绑定它，但是......

this.onSignp = this.onSignUp.bind(this);

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

this.onSignp = onSignUp.bind(this);

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

【讨论】：

【解决方案5】：

如果你从 React 类的外部导入一个函数，那么不需要在 React 类中绑定它。您只需导入并使用它。见下文..

functions/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()} />
      )
    }
}

【讨论】：