时间戳

首页 > 解决方案 > 使用带有 typescript 的样式组件的“as”多态属性

javascript - 使用带有 typescript 的样式组件的“as”多态属性

问题描述

我试图实现一个排版反应组件。
正如您在下面看到的，我将变量作为输入道具并将其用作 VariantsMap 对象的索引以获取相应的 html 标记名称。

然后我使用styled-components 'as' 多态道具将其呈现为选定的 html 标记。

但我不断收到此错误：
No overload matches this call. Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type 'string' is not assignable to type 'undefined'.

我在@types/styled-component中发现 'as' 道具可以是 'never | undefined'，我的 variablesMap 返回字符串类型。
但我真的想将此“as”道具与我的特定于变体的 html 标记选择功能一起使用。

有没有办法解决这个问题？

const variantMap = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  subheading1: 'h6',
  subheading2: 'h6',
  body1: 'p',
  body2: 'p',
};

export const Typography = ({ variant : string }) => { 

      const selectedComponent = variantMap[variant];

      return (<TypographyRoot
        as={selectedComponent}
        variant={variant}
        {...props}
      >
        {children}
      </TypographyRoot>);
}

标签： javascriptreactjstypescriptstyled-components

解决方案

首先，export const Typography = ({ variant : string }) => {} 是无效的语法。

您刚刚将 destructured 的名称更改variant为string. 您没有提供类型。

string即使使用像这里这样的有效类型也会出现错误的原因export const Typography = ({ variant }:{variant: string}) => {}是variantMap期望作为键h1| 'h2' |'h3' ... 键而string更宽。我愿意打赌您不想将foo字符串分配给variant属性。

为了修复它，您只需要使其variantMap不可变并将适当的约束应用于variantMap：

import React from 'react'
import styled from "styled-components";

const Div = styled.div`
  color: red;
`;

const VariantMap = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  subheading1: 'h6',
  subheading2: 'h6',
  body1: 'p',
  body2: 'p',
} as const;

type Props = {
  variant: keyof typeof VariantMap
}
export const Typography = ({ variant }: Props) => {

  const selectedComponent = VariantMap[variant];

  return <Div
    as={selectedComponent}
  />
}

现在styled-component很幸福。

操场

推荐阅读