无法在 class 组件中调用 React Hook “React.useState”

Question

在 ReactJS 中，我尝试将 div class 名称切换到另一个元素。 但我收到这样的错误消息。 无法在 class 组件中调用 React Hook “React.useState”

我需要什么来修复代码？

import React from 'react';
 
class About extends React.Component{ 
  render(){
    const [show, setShow] = React.useState();
    return (
      <>
        <h1>About</h1>  
        <button className="toggle" onClick={() => setShow(!show)}>
          Toggle
        </button>
        <nav className={`nav ${show ? "show" : ""}`}>Navigation menu</nav>
      </>
    )
  }
}
  
export default About;

Answer 1

您不能在 class 组件内使用 Hook，但您绝对可以在单个树中将类和 function 组件与 Hook 混合使用。 ... 从长远来看，我们希望 Hooks 成为人们编写 React 组件的主要方式。

React Hooks 常见问题解答