我有一個ImageBlock帶有以下道具的組件：url, alt, caption, quality3 是可選的，并且url是必需的。
現在，我想在AlertError沒有條件檢查的情況下立即回傳。類似速記的東西。以前看過，但是沒找到。
基本上我想要做的是，如果URL未定義在嘗試訪問其余代碼之前立即回傳錯誤。
我很確定有一種更聰明的方法可以做到這一點，但是對于這段代碼來說，if 和 else 是多余的。
提前致謝。
import Image from "next/image";
import AlertError from "./Alerts/AlertError";
interface ImageProps {
url: string;
alt?: string;
caption?: string;
quality?: number;
}
const ImageBlock = ({ url, alt, caption, quality = 75 }: ImageProps) => (
<div className="max-w-5xl px-6 mx-auto mb-6">
{url ? (
<figure className="overflow-hidden rounded-md">
<Image
src={url}
width="1920"
height="1080"
layout="responsive"
quality={quality}
alt={alt}
/>
{caption && (
<figcaption className="flex justify-between p-3 text-sm font-bold text-bubblegum bg-navyBlue">
<span>{caption}</span>
</figcaption>
)}
</figure>
) : (
<AlertError message="Error! Image URL is required." />
)}
</div>
);
export default ImageBlock;
uj5u.com熱心網友回復：
您可以使用以下方法來實作此目的。添加一個檢查，如果URLprop 未定義或其長度為 0，則回傳以下 JSX。
if (!url || url.length == 0) {
return (
<AlertError message="Error! Image URL is required." />
)
}
<AlertError/>如果 url 沒有定義，使用這個你將只在 JSX 中回傳。
完整代碼：
interface ImageProps {
url: string;
alt?: string;
caption?: string;
quality?: number;
}
const ImageBlock = ({ url, alt, caption, quality = 75 }: ImageProps) => {
if (!url || url.length == 0) {
return (
<h3>Error! Image URL is required.</h3>
)
}
return (
<div className="max-w-5xl px-6 mx-auto mb-6">
{url ? (
<figure className="overflow-hidden rounded-md">
<Image
src={url}
width="1920"
height="1080"
layout="responsive"
quality={quality}
alt={alt}
/>
{caption && (
<figcaption className="flex justify-between p-3 text-sm font-bold text-bubblegum bg-navyBlue">
<span>{caption}</span>
</figcaption>
)}
</figure>
) : (
<AlertError message="Error! Image URL is required." />
)}
</div>
)
};
export default ImageBlock;轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445934.html