如何使Ionic breadcrumb可根据状态条件进行点击?

eivgtgni  于 2023-11-15  发布在  Ionic
关注(0)|答案(1)|浏览(128)

我正在使用Ionic 7与React 18。我想显示一个面包屑来说明用户在经历一系列步骤时已经到达的位置。我希望只有完成的步骤才能在面包屑中点击。这些步骤被存储为我状态的一部分(我使用Redux-Toolkit)。是否有一种优雅的方法来做到这一点?我有下面的方法...

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

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

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

o0lyfsai

o0lyfsai1#

您可以有条件地传递props,而不是有条件地呈现整个BreadCrumb组件。

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

字符串

相关问题