Question

我目前正在构建一个模式库，其中已经使用Button和React构建了一个styled-components组件。基于Button组件，我希望我所有的Link组件看起来都完全相同，并且接收完全相同的道具。为此，我使用了as的{{1}}道具，它使我可以将已经构建的元素用作另一个标签或组件。

按钮组件

styled-components

按钮类型

import * as React from 'react'
import { ButtonBorderAnimation } from './ButtonAnimation'
import { ButtonProps, ButtonVariant } from './Button.types'
import { ButtonBase, LeftIcon, RightIcon } from './Button.styled'

function Button({
  variant = ButtonVariant.Filled,
  children,
  leftIcon = null,
  rightIcon = null,
  ...props
}: ButtonProps): JSX.Element {
  return (
    <ButtonBase variant={variant} {...props}>
      {variant !== ButtonVariant.Ghost ? (
        <ButtonBorderAnimation {...props} />
      ) : null}
      {leftIcon ? <LeftIcon>{leftIcon}</LeftIcon> : null}
      {children}
      {rightIcon ? <RightIcon>{rightIcon}</RightIcon> : null}
    </ButtonBase>
  )
}

export default Button

链接组件

export interface ButtonProps {
  children: React.ReactNode
  variant?: 'filled' | 'outlined' | 'ghost'
  size?: 'small' | 'regular'
  underlinedOnHover?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  inverse?: boolean
}

export enum ButtonVariant {
  Filled = 'filled',
  Outlined = 'outlined',
  Ghost = 'ghost',
}

export enum ButtonSize {
  Small = 'small',
  Regular = 'regular',
}

链接类型

import * as React from 'react'
import Button from '../Button/Button'
import { Link as LinkRouter } from 'react-router-dom'
import { LinkProps } from './Link.types'

function Link({ to, ...props }: LinkProps): JSX.Element {
  return <Button to={to} as={LinkRouter} {...props} />
}

export default Link

当我执行上述操作时，这个问题就来了...

import { ButtonProps } from '../Button/Button.types'
import { LinkProps } from 'react-router-dom'

type RouterLinkWithButtonProps = ButtonProps & LinkProps

export interface LinkProps extends RouterLinkWithButtonProps {}

...这很有意义，因为按钮没有Property 'to' does not exist on type 'IntrinsicAttributes & ButtonProps'.的{{1}}组件所必需的道具to。

您将如何处理这样的事情？在使用Link时，react-router-dom道具甚至都不应该在类型中；在使用Button时，则需要to。

使用

Link

Answer 1

这应该有效。

...
time="2019-07-05T16:09:11Z" level=info msg="Created Istio client"
time="2019-07-05T16:09:11Z" level=info msg="All records are already up to date"

请注意，TypeScript应用了strict object literal assignment checks，这可以通过预先为变量分配对象文字而不是直接将其作为函数参数传递来实现，这与React组件props分配行为一致。

function Link(_props: LinkProps): JSX.Element {
  const props = { as: LinkRouter, ..._props };
  return <Button {...props} />
}

使用带样式的组件“ as”道具和打字稿

1 个答案: