在React开发中,组件之间的数据传递是常见且关键的任务。尤其是在复杂的应用中,如何有效地管理状态并在组件间传递数据,常常是开发者们需要深入探讨的问题。今天,我们将通过一个具体的例子来展示如何在父组件与多个子组件之间传递和管理状态。
案例背景
假设我们正在开发一个财务管理应用,其中有一个MoneyOut组件,它需要记录供应商的信息。我们的目标是通过父组件MoneyOut向两个子组件AddSupliers和SupplierNameCompont传递状态,并确保这些状态在用户操作下能够正确更新。
初始代码结构
// MoneyOut 组件 const MoneyOut = () => { const [supplierName, setSupplierName] = useState(''); const [supplierContact, setSupplierContact] = useState(0); return ( <> <Navbar/> <AddSupliers setSupplierName={setSupplierName} setSupplierContact={setSupplierContact}/> </> ); }; // AddSupliers 组件 const AddSup