无状态组件内部的功能

Question

在某人之前,这个问题与此问题重复 吗您能在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只是语法糖(仍然试图弄清楚这个短语的含义),那么我们如何在无状态或功能组件中实现这样的东西呢？

Answer 1

您可以在无状态功能组件中编写函数,但是函数组件没有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同时创建函数每次工具条渲染这不是做,正确的方式,因此,如果你想拥有这样的功能,它始终是最好写一个类组件,而不是因为功能组件的功能组件应该是纯洁的..