英文:
Conditional Logic Inside of Components
问题
我有这个复选框，它出现在“费率”字段内，当竞标处于草稿或挂起状态时，此复选框应该出现，当不是这两种状态时，它应该消失。出于某种原因，我无法弄清楚如何构建这个条件逻辑，它只接受第二个参数，所以当项目处于“草稿”状态时，复选框不显示出来。我在这里做错了什么：
<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}
/>
待定：
草稿：
英文:
Here I have this checkbox which appears inside of the "Rate" field, when the Bid is in draft or pending status, this checkbox should appear, when it is not, it should disappear. For some reason I can't figure out how to structure this conditional logic and its only taking in the second argument so when the item is in "Draft" status, the checkbox is not showing up. What am I doing wrong here:
<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:
答案1
得分: 2
要注意的是布尔值也是有效的 React 元素。如果您尝试渲染 false 或 true，React 会忽略它们。在这里，如果您的第一个条件为真，它会 评估 为 true，浏览器甚至不会检查其他条件（因为它后面跟着 ||）。
基本上，当您有这样一个条件时：
A || B
如果 A 为真，它将被评估，B 甚至不会被考虑。在您的示例中也是如此。如果状态是 "draft"，endAdornment 的值将是：
true || ... && ...
这等于 === true。
尝试将您的前两个条件分组在一起，如下所示：
(status === "Draft" || status === "Pending") && ...
这将解决问题，因为第一个括号的评估结果为 true 或 false。
在 && 情况下，如果第一个操作数为 false，则它评估为 false（结果中没有任何内容渲染给您）。如果它评估为 true，它会继续下一步并渲染您想要的内容。渲染的内容是一个对象，是真值。因此，您的条件的最终评估表达式将是确切的渲染对象，然后就完成了。
如果需要更多解释，请告诉我。
英文:
The thing to be aware of is that booleans are valid react elements too. If you render try to render false or true React will ignore them. Here, if your first condition is truthy, it evaluates to true and the browser will not even bother checking other conditions (since it's followed by ||).
Basically when you have a condition like this:
A || B
If A is truthy, it will be evaluated and B is not even taken into account. It's the same in your example. If the status is "draft", the value of endAdornment would be:
true || ... && ...
which is === true.
Trying to group your first two conditions here like:
(status === "Draft" || status === "Pending") && ...
would fix the problem as it the first parentheses evaluates to true or false.
In && cases then, if the first operand is false, it evaluates to false (nothing renders in result for you). And if it evaluates to true, it goes to the next step and renders what you want. The rendered thing is an object and is truthy. So the final evaluated expression of your condition would be the exact rendered object and you're done.
Please let me know if I need to clarify more.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论