如何在 TSX 中有条件地渲染道具

Question

我正在尝试使用 TypeScript 在功能组件中执行以下操作（我对其进行了一些抽象）：

return <IonToast {canClose && button={close}}

不允许将 prop 包裹在条件语句中。但是，拥有这种逻辑的最佳解决方案是什么？

我想在 return 之前分配 'close' 变量，但由于 Ionic 是一个外部组件库，它不接受空变量。

IonToast 在节点模块中输入如下。因此，如果您传递的不是有效值，它就不喜欢它。

export interface ToastOptions {
    buttons?: (ToastButton | string)[];
}

ts错误是这样的

Types of property 'button' are incompatible.     Type 'string | boolean | undefined' is not assignable to type 'string | undefined'.       Type 'false' is not assignable to type 'string | undefined'.

Answer 1

有很多解决方案可以实现这一点。如果您在相同条件下有许多属性，您可以将它们包装在一个对象中。由于 IonToast 期望形状的道具 -> https://ionicframework.com/docs/api/toast#toastoptions 你应该使用 buttons 而不是 button

return <IonToast {...(canClose && {buttons:[close]})}

Answer 2

已更新

根据this document

您可以为您的 buttons 属性设置此逻辑

const buttons: ToastButton[] = canClose ? [close] : [] //`close` needs to be `ToastButton` type
return <IonToast buttons={buttons} />

旧答案

我不知道哪个是这个案例的最佳解决方案，但我个人正在使用这种方式

return <IonToast button={canClose ? close : () =>{}} />

第二个参数是一个空函数，有助于防止错误，以防万一您在 IonToast 组件中调用 button()（间接指向 close()）。

如何在 TSX 中有条件地渲染道具

How to conditionally render a prop in TSX

reactjs

typescript

ionic-framework

tsx