Как мне расширить компонент- bootstrap с помощью машинописи? - PullRequest
Новая
       8

Как мне расширить компонент- bootstrap с помощью машинописи?

3 голосов
/ 19 февраля 2020

Я использую react-bootstrap@1.0.0-beta.14, и я пытаюсь создать пользовательский Button компонент с помощьюact-bootstraps Button, добавив еще одну опору isLoading. Из-за способа определения типов реагирования bootstrap я импортировал некоторые типы помощников и скопировал часть типов реагирования bootstrap: 

import React from 'react'
import { Button as Btn, ButtonProps } from 'react-bootstrap'
import { BsPrefixProps, ReplaceProps } from 'react-bootstrap/helpers'

interface Props {
  isLoading?: boolean
}

type BtnProps<As extends React.ElementType = 'button'> = ReplaceProps<
  As,
  BsPrefixProps<As> & ButtonProps
>

export const Button: React.FC<BtnProps & Props> = ({ isLoading, disabled, ...props }) => {
  return <Btn {...props} disabled={isLoading || disabled} />
}

Это почти работает. Ошибка, которую я получил, говорит мне, что ref неправильные типы реквизитов:

Типы свойств 'ref' несовместимы.

...

Тип '(instance: HTMLButtonElement | null) => void' нельзя назначить типу (instance: Button> | null) => void '.

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

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Итак, я решил решить эту проблему с помощью обходного пути: 

export const Button: React.FC<Props & React.ButtonHTMLAttributes<HTMLButtonElement>> = 
({ isLoading, disabled, ...props }) => 
<Btn disabled={isLoading || props.disabled} {...props} />

Это не идеально, потому что теоретически Btn может быть другим нативным элементом (не всегда button), но это достаточно хорошо для моего случая использования.

0 голосов
/ 20 февраля 2020

Мне просто интересно, не хватит ли следующего упрощения? 

import React from 'react'
import { Button as Btn, ButtonProps } from 'react-bootstrap'

interface Props {
  isLoading?: boolean
}

export const Button: React.FC<ButtonProps & Props> = ({ isLoading, ...props }) => {
  return <Btn {...props} disabled={isLoading || props.disabled} />
}
...