React TypeScript中onClick返回h1点击后不显示的解决方法

React的事件回调函数返回值不会被渲染到页面中。
你在onClick绑定的处理函数里返回JSX，这个返回值只会被浏览器事件系统接收，React的渲染流程完全不会处理这部分内容——所有要展示在页面上的元素，必须写在组件的渲染返回结构中，通过状态控制显隐才会被React插入到DOM树里，这也是为什么控制台日志能正常打印，但h1元素始终不显示的核心原因。

通过React状态控制目标文本的显隐，把要渲染的h1放在按钮同层级的JSX结构中（放在按钮代码后方就会默认展示在按钮下方），步骤如下：

1. 在组件内定义控制展示状态

   import { useState } from 'react';
   
   // 组件内部声明状态，默认隐藏文本
   const [showText, setShowText] = useState(false);
   

2. 修改点击事件逻辑，不再返回JSX，点击时更新状态触发渲染

   const handleOnClick = (id: string) => {
     console.log("button clicked" + id);
     // 点击后把状态设为true，展示文本
     setShowText(true);
   };
   

   注意：不建议给id标注any类型，根据实际id的类型标注为string/number即可，避免类型安全问题。

3. 调整组件JSX结构，把h1放在按钮下方，通过状态控制渲染

   <button onClick={() => handleOnClick(someId)}>a</button>
   {/* 状态为true时才渲染h1，位置在按钮下方 */}
   {showText && <h1>Clicked it</h1>}
   

如果需要点击不同按钮展示对应id的动态文本，可以把状态改为存储当前点击的id，实现更灵活的展示逻辑：

// 存储当前点击的id，默认值为null代表未点击
const [activeId, setActiveId] = useState<string | null>(null);

const handleOnClick = (id: string) => {
  console.log("button clicked" + id);
  setActiveId(id);
};

// JSX部分
<button onClick={() => handleOnClick(someId)}>a</button>
{activeId && <h1>Clicked it, current id: {activeId}</h1>}

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