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，如下所示：

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

class ModalExample extends React.Component {

  constructor(props) {
    super(props);
  }

  onSignUp = onSignUp.bind(this);

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

（我认为）

Answer 2

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

可能是。

如何在React中正确导入它？

如果使用默认值导出，则从<form> <input pattern="^\s*[a-zA-Z ]{2,30}$|^$"> <button>submit</button> </form> //导入exportedFunction

从def doit(arr) arr.group_by { |h| h["student"] }. map do |_,a| costs = a.map { |h| h['cost'] } imax = costs.each_index.max_by { |i| costs[i] } a[imax].merge('cost_per95'=>percentile(costs, 0.95).round(1)) end end doit array #=> [{"student"=>1, "cost"=>5, "university"=>2, "room"=>3, "cost_per95"=>4.7}, # {"student"=>2, "cost"=>4, "university"=>1, "room"=>1, "cost_per95"=>3.9}] array = [{"student" => 1, "cost" => 2, "university" => 2, "room" => 2}, {"student" => 1, "cost" => 5, "university" => 2, "room" => 3}, {"student" => 1, "cost" => 1, "university" => 3, "room" => 1}, {"student" => 2, "cost" => 1, "university" => 1, "room" => 3}, {"student" => 2, "cost" => 3, "university" => 2, "room" => 2}, {"student" => 2, "cost" => 4, "university" => 1, "room" => 1}] #=> [{"student"=>1, "cost"=>5, "university"=>2, "room"=>3, "cost_per95"=>4.7}, # {"student"=>2, "cost"=>4, "university"=>1, "room"=>1, "cost_per95"=>3.9}] //中导入{exportedFunction} //如果导出时未使用默认值。

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

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类中。您只需导入并使用它。参见下文。

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

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

5 个答案: