如何为图表配置代码添加OR分组条件以调整渲染触发逻辑？

原代码片段 #

{chart?.record?.settings?.yAxis?.type === 'number' &&
  chart?.record?.chartType != 'percentage' && (
    <div className="mt-1 remove remove-input-txt-border">
      <Controller
        name="settings.yAxis.aggregation"
        control={control}
        render={({ field }) => 

修改后的代码片段 #

{((chart?.record?.settings?.yAxis?.type === 'number' || chart?.record?.settings?.yAxis?.type === 'formula') &&
  chart?.record?.chartType != 'percentage') && (
    <div className="mt-1 remove remove-input-txt-border">
      <Controller
        name="settings.yAxis.aggregation"
        control={control}
        render={({ field }) => 

逻辑说明 #

• 原触发逻辑：仅当 yAxis.type 为 'number' 且 chartType 不等于 'percentage' 时渲染组件
• 修改后触发逻辑：当 yAxis.type 为 'number' 或 'formula'，同时 chartType 不等于 'percentage' 时渲染组件
• 关键改动：用括号包裹类型判断的 || 表达式，确保先执行类型的或运算，再与 chartType 的条件进行与运算，避免因逻辑运算符优先级导致的错误。

内容的提问来源于stack exchange，提问作者Abdo El-Mobayad