8、React组件交互：从数据传递到编辑删除功能实现

React组件交互：从数据传递到编辑删除功能实现

在React开发中，组件之间的交互是一个重要的话题。本文将详细介绍如何实现组件之间的数据传递，以及如何为学生信息列表添加编辑和删除功能。

1. 组件关系与数据传递

在我们的应用中， EnrolmentForm 和 EnrolList 组件都在 App 组件中被调用，它们之间没有直接的关系，但通过共同的父组件 App 建立了兄弟关系。为了实现从 EnrolmentForm 组件向 EnrolList 组件传递数据，我们需要借助 App 组件作为中间桥梁。

1.1 修改App.js

首先，在 App.js 中添加一个状态变量 studentDetails 来存储学生信息：

const [studentDetails, setStudentDetails] = useState({});

然后，更新 EnrolmentForm 标签，添加新的属性 setStudentDetails ：

<EnrolmentForm
    chosenProgram={program}
    se