MUI Base UI Collapsible 组件禁用状态问题解析

在 MUI Base UI 1.0.0-alpha.6 版本中，Collapsible 组件的禁用功能存在一个值得注意的实现问题。本文将深入分析这个问题及其解决方案。

问题现象

Collapsible 组件提供了两种设置禁用状态的方式：

1. 直接在 Trigger 组件上设置 disabled 属性
2. 在 Root 组件上设置 disabled 属性

然而在实际使用中发现，虽然文档说明 Root 组件支持 disabled 属性，但该属性实际上并未生效，只有直接在 Trigger 组件上设置 disabled 才能正常工作。

技术分析

通过查看源码实现，发现问题出在 Trigger 组件的逻辑处理上。当前实现中，Trigger 组件仅直接使用了自身的 disabled 属性，而没有考虑从上下文(Context)中获取 Root 组件传递的 disabled 状态。

正确的实现应该是：Trigger 组件的禁用状态应该是自身 disabled 属性与上下文中的 disabled 状态的逻辑或(OR)关系。这样无论在哪一层级设置禁用状态，都能正确反映到组件行为上。

解决方案

要修复这个问题，需要修改 Trigger 组件的实现逻辑：

1. 同时考虑组件自身的 disabled 属性和上下文中的 disabled 状态
2. 将这两个条件的逻辑或结果作为最终的禁用状态
3. 确保这个状态正确传递给底层交互元素

这种实现方式符合 React 组件设计的常见模式，即允许通过上下文(Context)从父组件控制子组件状态，同时也保留子组件自身的状态控制能力。

影响范围

该问题影响所有需要使用 Root 组件控制禁用状态的场景。对于只需要在 Trigger 级别控制禁用状态的用户，现有实现可以正常工作。

最佳实践

在等待官方修复的同时，开发者可以采用以下临时解决方案：

1. 直接在 Trigger 组件上设置 disabled 属性
2. 如果需要动态控制，可以通过状态管理在 Trigger 上设置禁用状态

这个问题预计会在后续版本中得到修复，届时开发者将可以更灵活地在 Root 或 Trigger 级别控制禁用状态。