组件内条件逻辑异常：Draft状态下Rate字段Checkbox不显示

问题出在逻辑运算符优先级上：JavaScript中&&的优先级高于||，你的原代码status === "Draft" || status === "Pending" && <组件>等价于：

(status === "Draft") || (status === "Pending" && <组件>)

当status为Draft时，表达式结果是true，但React不会渲染布尔值，所以Checkbox不显示；只有status为Pending时，才会执行&&后的组件渲染。

修正后的代码 #

把两个状态判断用括号包裹，确保先执行||逻辑，再和组件做&&判断：

<HrCurrencyInput
    name='Rate'
    label='Rate'
    width={width.medium}
    onChange={handleChange}
    value={formik.values.OverrideRate ? formik.values.Rate : selectedBillable?.Cost ?? ''}
    errors={formik.errors.Rate}
    InputProps={{
        endAdornment: 
        (
          (status === "Draft" || status === "Pending") &&
          (
            <InputAdornment position="end">
                <HrCheckBox
                    name="OverrideRate"
                    checked={formik.values.OverrideRate}
                    onChange={handleOverrideChange}
                    sx={{
                        m: "0 -8px 0 0",
                        "& .MuiCheckbox-root": {
                            p: 0
                        }
                    }}
                />
            </InputAdornment>
            )
        )
    }}
    InputLabelProps={{ shrink: true }}
    disabled={!formik.values.OverrideRate}
/>

状态效果对比 #

• Pending状态：
  
• Draft状态（修正后会显示Checkbox）：
  

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