Приведение стилизованных компонентов в React + Typescript

Я пытаюсь реализовать анимацию в React + Typescript.

interface IImageProps {
    frame: number
    width: number
    src: string
    onLoad: () => void
}

const Image = styled.img`
    transform: ${(props: IImageProps) => css`translate(0, -${props.frame * props.width}px)`};
`

Это выдает предупреждение в консоли:

styled-components.browser.esm.js:1507 Over 200 classes were generated for component styled.img. 
Consider using the attrs method, together with a style object for frequently changed styles.

Итак, я пытаюсь использовать attrs:

const Image = styled.img.attrs((props: IImageProps) => ({
    style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))``

теперь ТС жалуется, что:

Type '{ src: string; onLoad: () => void; width: number; frame: number; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "width" | "children" | "style" | "title" | ... 255 more ... | "useMap"> & { ...; } & { ...; }, "src" | ... 259 more ... | "useMap"> & Partial<...>, "src" | ... 260 more ... | "useMap"> & { ...;...'.
  Property 'frame' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "width" | "children" | "style" | "title" | ... 255 more ... | "useMap"> & { ...; } & { ...; }, "src" | ... 259 more ... | "useMap"> & Partial<...>, "src" | ... 260 more ... | "useMap"> & { ...;...'.

Я могу преодолеть это, используя const Image = ... `` as any.

Но мне не нравится этот any. Может быть, это простой ответ для тех, кто знаком с кодом стилизованных компонентов...

reactjs typescript styled-components

11.02.2019 23:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

3 035

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы захотите добавить IImageProps в последний вызов шаблона с тегами, чтобы сигнализировать, что это пользовательские свойства, которые ваш стилизованный компонент добавляет в дополнение к свойствам <img>:

const Image = styled.img.attrs((props: IImageProps) => ({
  style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))<IImageProps>``

Обратите внимание, что вы также можете переместить аннотацию типа из (props: IImageProps) в параметр типа .attrs:

const Image = styled.img.attrs<IImageProps>(props => ({
  style: { transform: `translate(0, -${props.frame * props.width}px)` },
}))<IImageProps>``

Таким образом, props будет вашим пользовательским интерфейсом плюс со всеми встроенными реквизитами для img.

12.02.2019 03:10

Другие вопросы по теме

Почему присваивание ранее введенной переменной меняет ее тип?

Как сравнить два массива и преобразовать один в другой

Пользовательский прокси в приложении Create React с использованием Typescript

Проверить присваиваемость без ошибки компилятора

Ошибка возврата файла @types/jest index.d.ts

Массив по индексу, возвращающий undefined в Angular ngAfterViewInit

Как получить определенную часть строки URL?

Angular Error TS2554: ожидается 0 аргументов, но получено значение x для операторов с конвейером

Разрешение сообщений компилятора Typescript для атрибутов Javascript во время выполнения

Как выбрать эти переменные-члены в этой структуре данных

Приведение стилизованных компонентов в React + Typescript

Ответы 1

Другие вопросы по теме

Похожие вопросы