时间戳

首页 > 解决方案 > 反应钩子到组件中的工具类

javascript - 反应钩子到组件中的工具类

问题描述

我知道过去也有人问过类似的问题，但我认为没有一个能达到目的。大多数都基于类组件，与我正在尝试做的不完全相同。所以我有两个组件，我想通过 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 这样的高级工具需要一个更复杂的方法。我相信这种感觉会随着时间而改变。欢迎大家提出意见。

标签： javascriptreactjsreact-hookstoggle

解决方案

您必须在函数 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。祝你好运 ：）

推荐阅读