React 钩子在组件中切换 class

Question

我知道过去有人问过类似的问题，但我认为 none 中的问题是中肯的。大多数基于 class 组件，与我正在尝试做的并不完全相同。所以我有两个组件，我想通过 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;

现在我正尝试通过点击切换 class。我知道为了让它在函数组件中工作，我需要 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

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

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

每次状态改变时，组件都会重新渲染。

Answer 3

在函数体中定义状态。钩子的规则说它们只能从功能组件主体或其他钩子中调用。 useState 钩子 return 是一个状态数组和状态更新函数，即 const [state, setState] = useState();.

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

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

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

设置class。由于 infoTrue 是一个布尔值，使用它的 truthy/falsey 对你有利，即不要直接与 true 或 false 进行比较。此外，字符串模板是不必要的，只是有条件地 return classname string.

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

React 钩子在组件中切换 class

React hooks to toogle class in component

javascript

toggle

reactjs

react-hooks