React中点击按钮无法显示函数内h1标签的问题求助

你当前的写法只是在点击按钮时调用了Letsee函数，虽然函数内部的console.log会执行，但它返回的JSX并没有被插入到组件的渲染树中——Test1组件的返回值始终只有按钮，所以页面不会显示<h1>Hii</h1>。

要实现点击按钮后显示内容，需要用React的状态（useState）来控制内容的显示/隐藏：

1. 引入useState钩子，在Test1组件中声明状态变量，用于标记是否显示目标内容
2. 将按钮的onClick改为切换状态的逻辑
3. 根据状态值决定是否渲染Letsee返回的JSX

修改后的代码如下：

import React, { useState } from 'react'

const Letsee = () => {
  console.log('Hii')
  return (
    <>
      <h1>Hii</h1>
    </>
  )
}

function Test1() {
  // 声明状态变量，初始值为false（不显示内容）
  const [showHii, setShowHii] = useState(false)

  return (
    <>
      {/* 点击按钮时切换状态 */}
      <button onClick={() => setShowHii(!showHii)}>Press</button>
      {/* 根据状态决定是否渲染Letsee的内容 */}
      {showHii && <Letsee />}
    </>
  )
}

export default Test1

• React组件的渲染内容由其返回值决定，只有当JSX出现在组件的返回树中时，才会被渲染到页面
• useState是React的状态钩子，用于在函数组件中管理状态变化，状态更新时组件会重新渲染，从而更新页面内容

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