React 中基于三元运算符显示数据

Question

我需要annualPlans 或monthlyPlans 来映射它，这取决于isAnually 是否为真。什么是最安全的定价方式？ 我有一个切换按钮，可以在年度计划和月度计划之间切换。

它是怎么做到的？

下面是我的代码

{isAnnually
  ? annualPlans
  : monthlyPlans.map((p, index) => (
      <Fragment key={index}>
        <PlanCard
          id={p.value}
          current={p.current}
          title={p.name}
          price={`$ ${
           p.annual_price ? p.annual_price : p.monthly_price
           }`}
        />
      </Fragment>
    ));
}

Answer 1

在调用 .map() 之前，您需要将三元条件括在括号中。

{(isAnnually ? annualPlans : monthlyPlans).map((p, index) => (
  <Fragment key={index}>
    <PlanCard
      id={p.value}
      current={p.current}
      title={p.name}
    />
  </Fragment>
))}