reactjs - 在 React 中如何创建一个组件，该组件可以获取 HTML 元素属性并在作为道具传递给子元素之前对其进行调整

Question

我在这里查看了一些类似的问题，但我找不到我正在寻找的确切内容。我有一种 hacky 方式来做我想做的事，但我确信有更好的方法。

我想要的是制作一个本质上是一个img元素的组件，并进行一些更改。有一个名为 Lazysizes 的延迟加载库，您需要传递srcas data-src，并确保图像具有 class lazyload。我想创建一个包含所有普通 HTML 图像道具的组件，但只是确保它正确设置了这些属性

const LazyImage: FunctionComponent<React.ImgHTMLAttributes<HTMLImageElement>> = ({ ...props }) => {
const { src, alt, className } = { ...props };
delete props.src;
delete props.className;

return (
  <img
    className={`${className ?? ''} lazyload`}
    data-src={src}
    alt={alt}
    data-sizes='auto'
    {...props}
  />
  );
};

这是我想出的，因为我遇到了一些问题。我想把src道具传递给data-src，不应该有任何src道具传递给实际img，但它当然会通过它，与className.

我只是想我会复制这些属性并根据需要设置它们，它们只是将它们从道具中完全删除，这样它们就不会被覆盖，但我相信有更好的方法。

任何帮助appriciated。

标签： reactjstypescript