React + Typescript: динамический класс, основанный на пропе - PullRequest
Новая
       15

React + Typescript: динамический класс, основанный на пропе

1 голос
/ 07 июня 2019

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

Iя пытался создать Тип, который будет действовать как карта, а затем попытаться расширить его, например, 

type AllAttrs = {
  a: AnchorHTMLAttributes,
  button: ButtonHTMLAttributes
}

и на данный момент пытаюсь выполнить следующее: 

interface Props extends AllAttrs["a"] {
  sanitize?: string;
}

и я получаю "интерфейс можеттолько расширять другие интерфейсы "

Вот как я использую свой компонент: 

<Element
   Component="a"
   ... more props
>Test</Element>

Цель состоит в том, чтобы TS жаловался на отсутствующие реквизиты, такие как href, если он не пройден

1 Ответ

0 голосов
/ 07 июня 2019

У вас может быть интерфейс, расширяющий запрос индексированного типа, но вам нужно поместить его в отдельный псевдоним типа (он не может быть непосредственно в предложении extends).

Однако это не правильный подход. Использование типа пересечения в подпорках позволит сделать вывод должным образом (см. здесь ): 

type AllAttrs = {
  a: AnchorHTMLAttributes<HTMLAnchorElement>,
  button: ButtonHTMLAttributes<HTMLButtonElement>
}


function Element<T extends keyof AllAttrs>({ Component, ...rest}: { Component: T} & AllAttrs[T]){
  return <Component {...rest as any} ></Component>
}

let r = <Element
  Component="a"
  href=""
>Test</Element>

//Error href not on button
let r2 = <Element 
  Component="button"
  href=""
>Test</Element>
...