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

Question

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

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

不允许将道具包装在条件中。但是，有这样的逻辑，最好的解决方案是什么？

我想在返回之前分配"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

更新

根据本文件

您可以将此逻辑用于buttons属性

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

旧答案

我不知道哪种是这种情况下的最佳解决方案，但我个人使用这种方式

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

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

Answer 2

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

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