布尔状态React

使用 useState 钩子实现布尔状态管理

React 中的 useState 钩子可以用于在函数组件中管理状态。以下是一个使用 useState 来实现布尔状态管理的示例代码：

import { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? '隐藏' : '显示'}
      </button>
      {isVisible && <p>这是一个可见的文本。</p>}
    </div>
  );
}

export default App;

在上面的代码中，useState 钩子接受一个初始值，这里是 false。我们使用数组解构来将这个状态值和更新状态值的函数赋值给 isVisible 和 setIsVisible 变量。我们还定义了一个 toggleVisibility 函数来取反 isVisible 的值。在 render 方法中，我们使用三元表达式来决定按钮的文本和 isVisible 的值相关联。如果 isVisible 是 true，我们会渲染出一个段落作为可见文本。否则，我们不会渲染出任何文本。始终将状态的逻辑保持在组件内部，可以降低状态管理的复杂性。