Блог

Главная - Вопросы по программированию - В React как создать компонент, который может принимать атрибуты HTML-элементов и настраивать их перед передачей в качестве реквизитов дочерним элементам

В React как создать компонент, который может принимать атрибуты HTML-элементов и настраивать их перед передачей в качестве реквизитов дочерним элементам

#reactjs #typescript

Вопрос:

Я рассмотрел здесь несколько подобных вопросов, но не могу найти именно то, что ищу. У меня есть хитрый способ делать то, что я хочу, но я уверен, что есть лучший способ.

Я хочу создать компонент, который по сути является img элементом, с несколькими изменениями. Существует библиотека ленивой загрузки под названием Lazysizes, вам нужно передать src as data-src и убедиться , что у изображения есть класс 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 .

Я просто подумал, что скопирую эти свойства и установлю их так, как мне нужно, а затем просто удалю их из реквизита, чтобы они не были перезаписаны, но я уверен, что есть лучший способ.

Любая помощь будет оказана.

Метки: ,