时间戳

首页 > 解决方案 > 无状态组件内部的函数

javascript - 无状态组件内部的函数

问题描述

在有人作为这个问题的重复之前 你能在 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 只是语法糖（仍在试图弄清楚短语的含义），那么我们如何在无状态或函数式组件中实现这样的东西呢？

标签： javascriptreactjs

解决方案

您可以在无状态功能组件中编写函数，但是函数组件没有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每次工具栏渲染时也会创建该功能，这不是正确的方法，因此如果您想要拥有这样的功能，总是建议编写类组件而不是功能组件，因为功能组件应该是纯的。.

推荐阅读