Question

在将样式组件 as 与自定义道具一起使用时，我收到了过载打字稿警告。

Overload 1 of 2, '(props: Omit & Partial>, "theme"> & { ...; } & { ...; }): ReactElement', gave the following error.

 Type 'string' is not assignable to type 'undefined'.

Overload 2 of 2, '(props: StyledComponentPropsWithAs):
ReactElement, string | JSXElementConstructor>', gave the following error.

 Type '{ children: string | undefined; as: "span"; variants: { show: { opacity: number; y: number; transition: { ease: string; duration: number; staggerChildren: number; delayChildren: number; }; }; hide: { ...; }; }; }' is not assignable to type 'IntrinsicAttributes & Omit, HTMLSpanElement>, "key" | keyof HTMLAttributes> & { ...; }, never> & Partial, "theme"> & { ...; } & { ...; }'.

 Property 'variants' does not exist on type 'IntrinsicAttributes & Omit, HTMLSpanElement>, "key" | keyof HTMLAttributes> & { ...; }, never> & Partial, "theme"> & { ...; } & { ...; }'.ts(2769)

index.d.ts(161, 53): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & Omit & Partial>, "theme"> & { ...; } & { ...; }'

示例：

链接组件

import React, { FC } from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

interface IProps {
  variants?: any;
}

const Atag= styled(motion.a)`
  text-decoration: none;
`;

const Link: FC<IProps> = (props) => {
  return <Atag{...props} />;
};

export default Link;

我在 Link 中导入的另一个文件。

const StyledLink= styled(Link)`
   border: 1px solid red;
`;

<StyledLink as="button" variants={motionVariant}>hello</StyledLink>

motionVariant 是帧运动的对象。

如果我删除了变体道具并只使用 as 道具打字稿停止抱怨。如果我删除 as 道具并保留变体道具，它就会停止抱怨。但它不会让我同时使用两者。为什么我不能在这里同时使用两者并仍然保持打字稿快乐。

打字稿中的样式组件“as”道具和自定义道具

0 个答案: