如果道具为空/未定义，在返回完整组件之前显示错误

Question

我有一个带有以下道具的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;

Answer 1

您可以使用以下方法来实现这一点。添加一个检查，如果未定义URL道具或其长度为0，则返回以下JSX。

if (!url || url.length == 0) {
return (
<AlertError message="Error! Image URL is required." />
)
}

如果没有定义url，那么使用此方法将在JSX中只返回<AlertError/>。

完整代码：

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;