如何使用React Hook实现点击按钮后仅渲染指定文本的功能

实现方案 #

现有代码的问题 #

• useState 未设置初始值，也没有用布尔类型的状态标记按钮是否被点击
• 点击事件回调函数内直接返回 JSX 不会生效，React 组件只会渲染自身 return 语句中返回的内容，事件 handler 的返回值不会被渲染
• 事件回调中的判断逻辑为空，没有更新状态的操作

正确实现代码 #

import { useState } from 'react';

const WelcomeButton = (props) => {
  // 初始值设为false，标识默认不显示指定文本
  const [isShowWelcome, setIsShowWelcome] = useState(false);

  const handleClick = () => {
    // 点击后更新状态为true，触发组件重新渲染
    setIsShowWelcome(true);
  };

  return (
    <div>
      {/* 可选：点击后禁用按钮，避免重复触发 */}
      <button onClick={handleClick} disabled={isShowWelcome}> Welcome </button>
      {/* 条件渲染：只有isShowWelcome为true时才渲染指定文本 */}
      {isShowWelcome && <p>Hi John</p>}
    </div>
  );
};

逻辑说明 #

• 用布尔类型的状态isShowWelcome控制文本的显隐，初始状态下文本不展示
• 点击按钮触发状态更新为true，组件会自动重新渲染
• 利用JSX的条件渲染语法，状态为true时就会渲染你指定的<p>Hi John</p>文本
• 如果需要点击按钮切换显隐，只需要把handleClick中的逻辑改为setIsShowWelcome(prev => !prev)，同时去掉按钮的disabled属性即可

内容的提问来源于stack exchange，提问作者user17403292