Javascript 将钩子反应到组件中的toogle类

我知道过去也有人问过类似的问题，但我认为没有一个是正确的。大多数是基于类组件的，与我尝试做的并不完全相同。 所以我有两个组件，我想通过onClick来打开和关闭它们

      <div
        className={`${showInfo === false ? "carousel_wrapper" : "no_display"}`}
      ></div>

      {/* <!-- page info below --> */}

      <div
        className={`${showInfo === true ? "page_info_content" : "no_display"}`}
      >

现在我试图通过点击来切换这个类。我理解，为了在功能组件中工作，我需要有useState，因为这是观察元素变化的方式。 但是我可以使用“useState”来更改默认值吗？像这样：

let toggleInfo = () => {
  const [infTrue, infoFalse] = useState(true);
  showInfo = infoFalse(false);
  return showInfo; 
  };

我得到一个错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

---

还是说这毫无意义？请注意，我对React和JS都是新手，所以我可能会从一个奇怪的角度来看这一点，但JS E6+有一个简单的切换选项，而像React这样的高级工具需要更复杂的方法，这似乎很奇怪。我相信这种感觉会随着时间而改变。欢迎提供任何建议。

您必须在函数toggleInfo之外声明状态变量

您的功能组件应该如下所示

const funcComp = ()=>{
  const [infTrue, infoFalse] = useState(true);
  const toggleInfo = () => {
       infoFalse(false);
       }
  return(
   <>
   <button onClick={toggleInfo}>Click to toggle </button>
     <div
        className={`${showInfo === false ? "carousel_wrapper" : "no_display"}`}
      ></div>

      {/* <!-- page info below --> */}

      <div
        className={`${showInfo === true ? "page_info_content" : "no_display"}`}
      >
    </>
 )

}

constfuncomp=（）=>{
const[infTrue，infoFalse]=useState（true）；
常量切换信息=（）=>{
infoFalse（false）；
}
返回(
单击以切换
{/*  */}
)
}

---

欢迎来到React和JS。祝您好运：）

React钩子必须是组件根级别的一个标记。它不可能在其他任何东西里面。声明状态后，可以使用数组索引1中声明的方法更改状态：

const MyComponent = () => {
 const [state, setState] = useState(false)
 
 return <button onClick={() => setState(true)} >Click Me</button>
}

constmycomponent=（）=>{
const[state，setState]=useState（false）
返回设置状态（true）}>单击我
}

---

每次状态更改时，组件都将重新启动。

在函数体中定义状态。钩子规则说，它们只能从功能组件体或其他钩子中调用。

useState

hook返回状态和状态更新函数的数组，即

const[state，setState]=useState（）

然后在回调中使用下一个值调用状态更新程序，即
false

const toggleInfo = () => setInfoTrue(false);

定级。由于
infoTrue
是一个布尔值，因此请使用它的真/假来发挥优势，即不要直接与
true
或
false
进行比较。此外，字符串模板是不必要的，只是有条件地返回类名字符串

<div
  className={infoTrue ? "page_info_content" : "no_display"}
>


Youtube上有没有看过React基础教程？这在很多层面上都是错误的。谢谢！我做了一些不太像这样的事情，但很相似。你的回答帮助很大！
const toggleInfo = () => setInfoTrue(false);

<div
  className={infoTrue ? "page_info_content" : "no_display"}
>