Question

我知道过去曾问过类似的问题，但我认为这些问题都没有达到目的。大多数都基于类组件，并且与我尝试做的不完全相同。因此，我想通过onClick打开和关闭两个组件。

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

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

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

我默认将var设置为true：

var showInfo = true;

现在我正试图通过单击切换班级。我理解，要使它在功能组件中起作用，我需要具有useState，因为这是React监视元素更改的方式。但是我可以使用“ 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这样的高级工具却需要更复杂的方法。我相信这种感觉会随着时间而改变。任何建议都将受到欢迎。

Answer 1

您必须在函数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"}`}
      >
    </>
 )

}

欢迎使用React和JS。祝你好运：）

Answer 2

反应挂钩必须是组件的根目录。它不能在其他任何东西里面。声明状态后，您可以使用数组索引1中声明的方法对其进行更改：

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

每次更改状态时，组件都会重新呈现。

Answer 3

在功能体内定义状态。挂钩规则表示只能从功能组件主体或其他挂钩中调用它们。 useState挂钩返回状态和状态更新函数数组，即const [state, setState] = useState();。

const [infoTrue, setInfoTrue] = useState(true);

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

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

设置课程。由于infoTrue是布尔值，因此请利用其真实/虚假优势，即不要直接与true或false进行比较。另外，字符串模板不是必需的，只需有条件地返回classname字符串即可。

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

反应挂钩以切换组件中的类

3 个答案: