React组件disabled功能正常但SCSS无法识别该属性的问题咨询

核心原因1：React布尔属性的渲染逻辑 #

React对布尔属性的处理规则是：当属性值为true时，会在HTML中渲染该属性（比如<input disabled>）；当值为false、undefined或null时，会直接省略这个属性。

你的SCSS同时用了input:disabled（伪类选择器）和input[disabled]（属性选择器），理论上当React设置disabled={true}时，两种选择器都应该生效。但如果你的条件elementsMap[e.id]?.length === 0返回的不是预期的true/false，就会导致属性不渲染：

• 若elementsMap[e.id]不存在，elementsMap[e.id]?.length会是undefined，undefined === 0为false，此时disabled属性不会被渲染，SCSS的input[disabled]选择器自然失效。

核心原因2：变量引用不一致 #

你的代码存在明显的变量混用问题：

• input的id属性用的是element.id：id={element-${element.id}}
• 但disabled判断、onClick事件里用的是e.id：disabled={elementsMap[e.id]?.length === 0}、toggleElement(e.id)
• label的htmlFor用的是element.id，但内部显示的是e.name：{e.name}

如果e和element不是同一个变量（比如循环遍历的变量是element，但你错误地写成了e），会导致elementsMap[e.id]无法正确获取对应数据，disabled的条件判断结果错误，本该渲染disabled属性的场景没渲染，最终SCSS样式无法触发。

额外验证点 #

你提到“React的disabled功能运行正常”，这说明实际DOM元素的disabled状态被正确设置了，但HTML中没看到属性——这其实不符合React的正常表现：当React设置disabled={true}时，开发者工具的HTML面板应该能看到disabled属性。你可以打开开发者工具，检查该input元素的disabled属性是否存在，同时查看elementsMap[e.id]的实际值，确认条件判断是否符合预期。

临时解决方案你已经用到了：给label加.disabled类，但解决根本问题需要修正变量引用错误，确保disabled的条件判断能正确返回true/false。

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