React项目如何根据点击的不同按钮为Modal传递对应展示内容？

实现思路 #

• 提前定义所有服务的元数据集合（包含id、标题、描述等字段）
• 新增currentService状态存储当前选中的服务数据
• 点击按钮时将对应服务数据存入状态后再打开弹窗
• 将状态中的服务数据作为props传递给Modal组件

修改后的完整代码 #

// 提前配置所有服务的元数据，后续新增服务直接修改这个数组即可
const services = [
  { id: 's1', title: '服务1', description: '这是服务1对应的详情描述内容' },
  { id: 's2', title: '服务2', description: '这是服务2对应的详情描述内容' },
  { id: 's3', title: '服务3', description: '这是服务3对应的详情描述内容' },
  { id: 's4', title: '服务4', description: '这是服务4对应的详情描述内容' },
]

const ServicesCard: React.FC = () => {
  const [modal, setModal] = useState(false);
  // 新增状态存储当前选中的服务数据
  const [currentService, setCurrentService] = useState(null);

  const openModal = (service) => {
    setCurrentService(service);
    setModal(true);
  }

  const closeModal = () => {
    setModal(false);
    setCurrentService(null); // 关闭时清空选中数据，避免下次打开弹窗闪旧内容
  }

  return (
    <div className={classes.ServicesCard}>
      <div className={classes.ServicesCardContainer}>
        <div className={classes.TitleContainer}>
          <h2>Services</h2>
          <hr />
        </div>
        <div className={classes.ButtonContainer}>
          {/* 遍历服务列表渲染按钮，避免重复代码 */}
          {services.map(service => (
            <button key={service.id} onClick={() => openModal(service)}>
              {service.title}
            </button>
          ))}

          <ServiceModal show={modal} close={closeModal} title={currentService?.title || ''}>
            {currentService?.description}
          </ServiceModal>
        </div>
        <p>Click For More Info</p>
      </div>
    </div>
  );
};

关键说明 #

• 配置化的服务列表不用重复写4个按钮代码，后续新增服务只需要修改services数组即可，易维护
• 完全通过状态驱动数据，不需要获取DOM的id属性匹配内容，符合React开发规范
• 可选链?.可以避免currentService为空时读取属性报错
• 如果你的ServiceModal组件支持description类的props，也可以把描述内容作为prop传递，不用放在children插槽中，根据你自己的组件实现调整即可

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