10、React 状态管理与 CSS 集成实战

React 状态管理与 CSS 集成实战

1. React 状态管理基础

在 React 中，若要管理状态中的多个值，有两种常见方法。一是多次调用 useState 来为每个值获取对应的设置器；二是将初始值设为数组或对象。若值变得更加复杂，可能会有其他更易用的钩子，不过这里暂不展开。另外，如果状态的取值为字符串且有效字符串值数量有限，TypeScript 有相应机制来处理。

2. 状态共享

当状态完全封装在一个组件内部时，钩子和 useState 能很好地工作。但实际中，组件间常需共享状态，可能是页面中某一 DOM 子树内的组件共享，也可能是跨页面共享。这里主要探讨父子组件间共享状态的简单场景，即“提升状态”和“传递状态”模式。

以购票场景为例，通过下拉菜单确定每次购买的座位数，点击座位会选中其右侧相应数量的座位。若右侧座位不足，则该座位标记为不可用。此功能引入了一个新状态：通过下拉菜单购买的座位数。同时， Seat 组件需了解所在行其他座位的信息来确定自身状态。

3. 代码实现

• 移除多余标签 ：首先，要从 app/views/concerts/show.html.erb 文件的现有 HTML 中移除 select 标签，避免出现两个下拉菜单且只有一个可用的问题。
• Venue 组件 ：