Question

之前有人将这个问题复制一遍 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只是语法糖（仍然试图弄清楚这个短语的意思），那么我们如何在无状态或者无状态下实现这样的东西呢？功能组件？

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函数，这不是正确的方法，因此如果你想拥有这样的功能，那么它总是可取的编写一个类组件而不是一个功能组件，因为功能组件应该是纯粹的。。

Answer 2

您可以编写嵌套函数，因为这是JavaScript的概念。但是作为Reactjs，它只在道具或状态发生变化时重新渲染。因此，如果您更新任何局部变量或this.something，它将不会反映在UI上。只有当父状态或道具发生变化时才能在UI上显示，并且有关此功能的React事件应该更新。

如果要根据变量更新UI，则应更新状态或道具。因此要么你必须传递道具并处理父级中的状态，要么你必须创建有状态的组件。

你可能想要尝试不同的东西，请分享你的情景。我们可以根据情况找到合适的方法。

无状态组件内部的功能

2 个答案: