Question

我似乎很难在使用引擎盖下使用StyledComponents的组件中传播道具。每当我尝试传递接口中未定义的道具（例如，样式标签）时，都会出现错误。这是我当前的实现方式：

interface IParagraphProps {
  text: string;
}

const StyledParagraph = styled.p`
  max-width: 90%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;



const Paragraph = (props: IParagraphProps) => {
  const { text, ...rest } = props;
  return  (
    <StyledParagraph {...rest}>{text}</StyledParagraph>
  ) 
};
export default Paragraph;

编辑：这是错误：Property 'style' does not exist on type 'IntrinsicAttributes & IParagraphProps'. 还有我使用此组件的地方：

const Card = () => {
  return (
        <Paragraph
            style={{ marginTop: "1rem" }}
          text="whatever"
        />)

};

Answer 1

您要为Paragraph组件提供样式属性，但是该组件仅需要text属性。您应该删除该属性：

const Card = () => {
  return (
        <Paragraph
          text="whatever"
        />)
};

或者您应该将该属性添加到您的组件中：

interface IParagraphProps {
  text: string;
  style: React.CSSProperties;
}

如果要匹配所有可能的道具，可以执行以下操作：

type IParagraphProps =  {
  text: string;
} & React.ComponentProps<typeof StyledParagraph>

Answer 2

这类似于第一个答案，但使用接口而不是类型：

<块引用>

如果你想匹配整个可能的道具，你可以这样做：

输入IParagraphProps = { 文本：字符串； } & React.ComponentProps

如果您希望能够将文本以外的任何道具传播到 StyledParagraph，则需要在 IParagraphProps 接口中指定它可以接受 StyledParagraph 的任何道具。

interface IParagraphProps extends React.ComponentPropsWithoutRef<typeof StyledParagraph> {
  text: string
}

^^^ 现在这个组件的 props 被指定为 text: string + StyledParagraph 接受的每个 props。如果您也想允许引用，您可以将 ComponentPropsWithoutRef 更改为 ComponentPropsWithRef 并使用 React.forwardRef。

来源：https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/#useful-react-prop-type-examples

使用React和样式化组件传播道具TypeScript

2 个答案: