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

How to conditionally render a prop in TSX

我正在尝试使用 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'.

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

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

已更新

根据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())。