無狀態組件內部的功能

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函數，這不是正確的方法，因此如果你想擁有這樣的功能，總是建議編寫類組件而不是函數組件，因為函數組件應該是純粹的。 。

Answer 2

您可以編寫嵌套函數，因為這是JavaScript的概念。 但是作為Reactjs，它只在道具或狀態發生變化時重新渲染。 因此，如果您更新任何局部變量或this.something ，它將不會反映在UI上。 只有當父狀態或道具發生變化時才能在UI上顯示，並且有關此功能的React事件應該更新。

如果要根據變量更新UI，則應更新狀態或道具。 因此，要么必須傳遞到props並處理父級中的狀態，要么必須創建有狀態組件。

你可能想要得到不同的東西，請分享你的情景。 我們可以根據情況找到合適的方法。