在某人之前,因为这个问题与此重复 Can you write nested functions in JavaScript?
我想知道我们是否可以做这样的事情?
const toolbar = (props) => {
let sidedrawer = false;
showSideDrawer = () => {
sidedrawer = !sidedrawer
}
return (
<header className={Classes.Toolbar} purchasingHandlerClose={this.showSideDrawer}>
//Something here
</header>
)
}
export default toolbar;
更准确地说,在功能组件中是这样的
showSideDrawer = () => {
sidedrawer = !sidedrawer
}
然后这样调用它
<header className={Classes.Toolbar} purchasingHandlerClose={this.showSideDrawer}>
现在,我知道我们可以做这个有状态的组件或类,但在 JS 中,Class 只是语法糖(仍在试图弄清楚这句话的意思),那么我们如何在无状态或功能组件?
最佳答案
您可以在无状态功能组件中编写函数,但是功能组件没有this
变量,为了调用您只需编写的函数
const toolbar = (props) => {
let sidedrawer = false;
const showSideDrawer = () => {
sidedrawer = !sidedrawer
}
return (
<header className={Classes.Toolbar} purchasingHandlerClose={showSideDrawer}>
//Something here
</header>
)
}
export default toolbar;
然而,上述的一个缺陷是,每次呈现工具栏组件时,sidedrawer 都会初始化为 false,因此 showSideDrawer 无法按预期工作。但是,您可以将 sidedrawer 变量移到功能范围之外,它会起作用
let sidedrawer = false;
const toolbar = (props) => {
const showSideDrawer = () => {
sidedrawer = !sidedrawer
}
return (
<header className={Classes.Toolbar} purchasingHandlerClose={showSideDrawer}>
//Something here
</header>
)
}
export default toolbar;
但是在这种情况下,每次呈现工具栏时也会创建 showSideDrawer
函数,这不是正确的做法,因此如果您想拥有这样的功能,它总是建议编写类组件而不是功能组件,因为功能组件应该是纯的。。
关于javascript - 无状态组件中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50831125/