NextJS 图像组件的 PropTypes

问题描述

我将新的 Next.js Image component 包含在另一个组件中，如下所示：

import PropTypes from "prop-types";
import Image from "next/image";

const Pattern = ({ classes,src,alt,width,height,layout }) => (
  <div className={classes.wrapper}>
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      layout={layout}
      className={classes.img}
    />
  </div>
);

Pattern.propTypes = {
  classes: PropTypes.shape({
    wrapper: PropTypes.string,img: PropTypes.string,}),src: PropTypes.string,alt: PropTypes.string,layout: PropTypes.string
};

export default Pattern;

如您所见，我们使用的是 prop-types。我无法弄清楚为宽度和高度设置什么道具类型。以下是 Next.js 文档中 Image 组件的示例用法：

<Image
  src="/me.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

我不知道如何设置。 PropTypes.number？ PropTypes.object？还有什么？

解决方法

在您的文档链接中，如果您滚动到所需的道具，它会说它必须是一个整数，对于 width 和/或 height：

图像的宽度，以像素为单位。必须是没有单位的整数。

鉴于此，PropTypes.number 将是两者的正确 PropTypes。

,

尝试使用字符串和 isRequired

'C:\\nltk_data'