1

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

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? 还有什么？

4

2 回答 2

1

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

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

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

于 2021-01-05T18:02:43.327 回答
0

尝试使用字符串和 isRequired

Pattern.propTypes = {
  width: PropTypes.number.isRequired,
}
于 2021-01-05T18:02:59.923 回答