如何根据状态条件使 Ionic 面包屑可点击？

Question

我正在将 Ionic 7 与 React 18 结合使用。我想显示一个面包屑，以说明用户在执行一系列步骤时已经到达的位置。我希望只有已完成的步骤才能在面包屑中单击。这些步骤存储为我的状态的一部分（我为此使用 Redux-Toolkit）。有没有一种优雅的方法来做到这一点？我有以下...

// get state from Redux  
const step = useSelector((state: RootState) => state.step);

function isStep3Completed(): boolean {
  return step === StepsEnum.STEP4;
}

<IonBreadcrumbs>
  <IonBreadcrumb href="#step1">Step 1</IonBreadcrumb>
  <IonBreadcrumb href="#step2">Step 2</IonBreadcrumb>
  {isStep3Completed() ? (
    <IonBreadcrumb href="#step3">Step 3</IonBreadcrumb>
  ) : <IonBreadcrumb >Step 3</IonBreadcrumb>}
  <IonBreadcrumb href="#step4">Step 4</IonBreadcrumb>
</IonBreadcrumbs>

但是根据步骤是否完成来编写两个不同的面包屑似乎有点麻烦，我想知道 Ionic 是否提供了更有效的方法来做到这一点。

Answer 1

您可以有条件地传递 props，而不是有条件地渲染整个

BreadCrumb

组件。

<IonBreadcrumb {...isStep3Completed() ? { href: "#step3" } : {}}>
  Step 3
</IonBreadcrumb>