[英]How to properly import function in a ReactJS file
I'm having trouble importing a function in react. 我无法在react中导入函数。 I used
export default
to export the function. 我使用
export default
导出功能。 However after importing it I tried to bind it in the render function but I got an error saying TypeError: Cannot read property 'bind' of undefined
. 但是,导入后,我尝试将其绑定到render函数中,但出现错误,提示
TypeError: Cannot read property 'bind' of undefined
。 Does this mean the function did not correctly import? 这是否意味着函数未正确导入? How do I correctly import it in React?
如何在React中正确导入它?
import onSignUp from '../../functions/onsignup'
class ModalExample extends React.Component {
constructor(props) {
super(props);
}
this.onSignUp=this.onSignUp.bind(this);
}
render(){
return(...)
}
It looks like you have an extra bracket in there, also, the imported function will just be onSignUp
not this.onSignUp
. 看来您那里还有一个括号,而且,导入的功能将只是
onSignUp
而不是this.onSignUp
。
import onSignUp from '../../functions/onsignup'
class ModalExample extends React.Component {
constructor(props) {
super(props);
this.onSignUp = onSignUp.bind(this);
}
render(){
return(...)
}
}
You should bind the function in the ctor
or alternatively assign it in the class to onSignup
like this: 您应该在
ctor
绑定该函数,或者在类onSignup
其分配给onSignup
如下所示:
import onSignUp from '../../functions/onsignup'
class ModalExample extends React.Component {
constructor(props) {
super(props);
}
onSignUp = onSignUp.bind(this);
render(){
return(...)
}
}
(I think) (我认为)
Does this mean the function did not correctly import?
这是否意味着函数未正确导入?
Possibly yes. 可能是的。
How do I correctly import it in React?
如何在React中正确导入它?
import exportedFunction from './directorypath';
从
'./directorypath';
导入'./directorypath';
// if exported using default //如果使用默认导出
import { exportedFunction } from './directorypath';
从
'./directorypath';
导入{ './directorypath';
} './directorypath';
// if default not used while exporting. //如果导出时未使用默认值。
A code snippet of the component would give a better picture of the problem. 该组件的代码片段将更好地说明问题。
Maybe you can put you declaration in the constructor like this referring to the onSignUp
you imported instead of this.onSignUp
that doesn't exists : 也许你可以把你的声明在构造函数中这样提及
onSignUp
你进口,而不是this.onSignUp
不存在:
constructor(props) {
super(props);
this.onSignUp = onSignUp.bind(this);
}
Can you show us the function in the onSignUp file? 您可以在onSignUp文件中向我们展示该功能吗? you might not need to bind it depending on what function it is, however...
您可能不需要根据其功能来绑定它,但是...
this.onSignp = this.onSignUp.bind(this); this.onSignp = this.onSignUp.bind(this);
Doing this in the constructor will assume you are initializing a new function not the one you are importing, use this instead. 在构造函数中执行此操作将假定您正在初始化一个新函数,而不是要导入的函数,请改用此函数。
this.onSignp = onSignUp.bind(this);
And make sure you are properly defining it from where you are declaring 并确保从声明位置正确定义它
If you are importing a function from out side of React class, then no need to bind it inside React class. 如果要从React类外部导入函数,则无需在React类内部绑定该函数。 You just import and use it.
您只需导入并使用它。 see the below..
参见下面。
functions/onsignup.js 功能/ onsignup.js
function defined and export here. 函数定义并在此处导出。
const onSignUp = () =>{
// function code here
}
export default signup;
ModalExample.js ModalExample.js
import the function here and use. 在此处导入功能并使用。
import React, {Componenet} from 'react';
import onSignUp from '../../functions/onsignup'
class ModalExample extends React.Component {
constructor(props) {
super(props);
}
render(){
return(
<button onClick={()=>onSignUp()} />
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.