React组件通信问题：点击Main组件按钮修改Content组件文本

核心思路 #

将当前选中的时间周期状态放在Main父组件中，通过按钮点击事件更新状态，再把对应周期的数据通过props传递给Content子组件，子组件根据props自动更新渲染内容，而非创建新组件。

修改后的Main组件代码 #

import React, { useState } from "react";
import Content from "./Content";

// 定义各周期对应的内容数据
const periodData = {
  daily: {
    hours: "5 hours",
    date: "Yesterday"
  },
  weekly: {
    hours: "32 hours",
    date: "Last Week"
  },
  monthly: {
    hours: "103 hours",
    date: "Last Month"
  }
};

export default function Main() {
  // 初始化默认选中weekly周期
  const [activePeriod, setActivePeriod] = useState("weekly");

  return (
    <main>
      <div className="second-card">
        <div className="main-card">
          <img
            className="avatar-logo"
            src="/images/image-jeremy.png"
            alt="Avatar"
          />
          <div className="main-card-details">
            <p>Report for</p>
            <h1>Jeremy Robson</h1>
          </div>
        </div>

        <div className="stats">
          {/* 绑定点击事件，更新选中周期 */}
          <button 
            className={`daily ${activePeriod === "daily" ? "active" : ""}`}
            onClick={() => setActivePeriod("daily")}
          >
            Daily
          </button>
          <button 
            className={`weekly ${activePeriod === "weekly" ? "active" : ""}`}
            onClick={() => setActivePeriod("weekly")}
          >
            Weekly
          </button>
          <button 
            className={`monthly ${activePeriod === "monthly" ? "active" : ""}`}
            onClick={() => setActivePeriod("monthly")}
          >
            Monthly
          </button>
        </div>
      </div>

      {/* 根据选中周期传递对应数据给Content */}
      <Content
        WeeklyHours={periodData[activePeriod].hours}
        Weeklydate={periodData[activePeriod].date}
        img="/images/your-activity-icon.png"
        activity="Work"
        cardIcon="/images/ellipsis-icon.png"
      />
    </main>
  );
}

修改后的Content组件代码（仅需确保props接收正确） #

export default function Content(props) {
  return (
    <div className="dashboard-card">
      <div className="icons">
        <img className="card-icon" src={props.img} alt="activity icon" />
      </div>

      <div className="card-details">
        <div className="card-activity-title">
          <p>{props.activity}</p>
          <img
            className="ellipsis-icon"
            src={props.cardIcon}
            alt="Ellipsis card icon"
          />
        </div>

        <div className="progress">
          <h1>{props.WeeklyHours}</h1>
          <h5>{props.Weeklydate}</h5>
        </div>
      </div>
    </div>
  );
}

关键说明 #

• 状态管理：用useState维护activePeriod状态，点击按钮时更新该状态，触发组件重渲染。
• 数据映射：提前定义periodData存储各周期内容，根据activePeriod取值传递给子组件，避免重复逻辑。
• props驱动渲染：Content组件完全依赖父组件传递的props渲染内容，React会自动检测props变化并更新现有组件，不会创建新卡片。
• 可选优化：给选中按钮添加active类，可配合CSS直观显示当前选中周期。

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