如何在 React 中使用 TypeScript 做简单的三元？

Question

我是 React 和 TypeScript 的新手。我在谷歌上找不到解决方案。

我有一个输出图像的组件。<a>如果有给定的 URL 属性，我想将该图像包装在一个标签中。我不确定如何简单地编写逻辑。

从网上看，我写了以下内容：

const imageBlock = ({
  imageSrc,
  imageAlt,
  imageTitle,
  imageLink,
}: imageBlockProps) => {
  return (
    imageLink && (
      <a href={imageLink}>
    )
      <img src={imageSrc} alt={imageAlt} title={imageTitle} />

    imageLink && (
      </a>
    )
  )
};

但我无法让它工作。

有谁知道最好的方法吗？

Answer 1

编写命令式代码没有错，真的：

const img = <img src={imageSrc} alt={imageAlt} title={imageTitle} />;

if (imageLink) {
    return <a href={imageLink}>{img}</a>;
}

return img;