如何创建和使用在 Typescript 中呈现 {props.children} 的样式组件？

Question

我有一个ExternalLink组件，用于呈现外部 URL 的锚标记。 我已经使用styled-components实现了它。

代码沙盒链接

外部链接.tsx

它基本上获得了一个href道具并将孩子们渲染为{props.children} 。

const LinkAnchor = styled.a``;

interface ExternalLink_I {
  className?: string;
  href: string;
}

const ExternalLink: React.FC<ExternalLink_I> = (props) => {
  console.log("Rendering ExternalLink...");

  return (
    <LinkAnchor
      className={props.className} // ALLOW STYLING WITH STYLED-COMPONENTS
      href={props.href}
      target="_blank"
      rel="noopener noreferrer"
    >
      {props.children}
    </LinkAnchor>
  );
};

但是在与孩子一起渲染此组件时出现错误。

应用程序.tsx

export default function App() {
  return (
    <ExternalLink href={"https://www.google.com"}>
      EXTERNAL_LINK
    </ExternalLink>
  );
}

这是文本格式的错误消息：

输入'{孩子：字符串； href：字符串； }' 不可分配给类型 'IntrinsicAttributes & ExternalLink_I'。

类型“IntrinsicAttributes & ExternalLink_I”.ts(2322) 上不存在属性“children”

---

题

我究竟做错了什么？ 我怎样才能摆脱这个？

Answer 1

您也应该添加children类型：

interface ExternalLink_I {
  ...
  // or React.element, React.ReactNode etc
  children: string;
}

Answer 2

你忘了提到 ExternalLink 组件被包裹在 React.memo 中。 众所周知，'children' 属性会导致 React.memo 出现问题，因此从组件的类型定义中删除。 同时查看您的代码，似乎没有进行任何大的优化。 删除它会修复类型错误，或者您可以选择忽略它。

以下是有关此问题的一些轻松阅读：

• 问：什么时候不应该使用 React 备忘录？ #14463
• 为什么使用 children 道具会使 React.memo() 不起作用