如何在 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]})}
已更新
您可以为您的 buttons
属性设置此逻辑
const buttons: ToastButton[] = canClose ? [close] : [] //`close` needs to be `ToastButton` type
return <IonToast buttons={buttons} />
旧答案
我不知道哪个是这个案例的最佳解决方案,但我个人正在使用这种方式
return <IonToast button={canClose ? close : () =>{}} />
第二个参数是一个空函数,有助于防止错误,以防万一您在 IonToast
组件中调用 button()
(间接指向 close()
)。
我正在尝试使用 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]})}
已更新
您可以为您的 buttons
属性设置此逻辑
const buttons: ToastButton[] = canClose ? [close] : [] //`close` needs to be `ToastButton` type
return <IonToast buttons={buttons} />
旧答案
我不知道哪个是这个案例的最佳解决方案,但我个人正在使用这种方式
return <IonToast button={canClose ? close : () =>{}} />
第二个参数是一个空函数,有助于防止错误,以防万一您在 IonToast
组件中调用 button()
(间接指向 close()
)。