React单页点击h2替换div（无需新组件）实现方法

你当前写法的问题在于：React的事件回调函数返回的JSX不会被渲染到页面中，所有动态UI切换都必须通过组件状态驱动，在组件主return的JSX结构里做条件判断，不能靠事件函数直接return元素替换现有节点。

• 引入React内置的useState钩子，在组件内部声明控制周信息显隐的状态，默认值设为false，对应周天气信息默认隐藏的初始状态
• 修改weekToggle点击事件，移除函数内直接return JSX的逻辑，点击触发时只更新状态值即可
• 在你标注的代码区间内用三元表达式做条件渲染：状态为false时渲染可点击的「Unpack the Week」h2标题，状态为true时渲染目标周信息div，直接替换原h2的位置，全程不需要拆分新组件

import { useState } from 'react';
import PropTypes from 'prop-types';

const Weather = ({ cityConditions, cityName, cityTemp, cityWind, cityHumidity }) => {
  // 声明显隐控制状态
  const [isWeekUnpacked, setIsWeekUnpacked] = useState(false);

  // 点击事件仅负责更新状态
  const weekToggle = () => {
    console.log('clicked');
    setIsWeekUnpacked(true);
    // 如果需要支持点击来回切换显隐，把上一行替换为下一行即可
    // setIsWeekUnpacked(prev => !prev);
  };

  return (
    <div>
      <div>
        <img src={unpackedImg(cityConditions)} alt="" />
        <div>
          <img src={iconImg(cityConditions)} alt="" />
          <h1>{cityName}</h1>
          <h2>{cityTemp}</h2>
          <div>
            <div>
              <h3>{cityConditions}</h3>
              <p>Conditions</p>
            </div>
            <div>
              <h3>{cityWind}mph</h3>
              <p>Wind speed</p>
            </div>
            <div>
              <h3>{cityHumidity}%</h3>
              <p>Humidity</p>
            </div>
          </div>
        </div>
      </div>
      <h1>{cityName} unpacked!</h1>
      <div>
        {/* after clicking h2 element 'Unpack the Week' replace h2 with this div */}
        {/* ---------------------------------------------------------------------*/}
        {!isWeekUnpacked ? (
          <h2 onClick={weekToggle}>Unpack the Week</h2>
        ) : (
          <div>
            <img src="" alt="" />
            <h4>Monday</h4>
            <img src="" alt="" />
            <h4>75˚/65˚</h4>
          </div>
        )}
        {/* ---------------------------------------------------------------------*/}
      </div>
    </div>
  )
}

Weather.propTypes = {
  weather: PropTypes.object
}

export default Weather;

如果后续需要给周信息模块加收起功能，只需要给展示的div绑定点击事件，触发时把isWeekUnpacked设回false即可，所有逻辑都可以在当前组件内完成，不需要额外拆分新组件。

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