不能将类型“字符串”分配给类型“（URL：字符串）=>字符串”。ts（2322）

Question

我拥有以下重要的ui版权组件：

export default function Copyright(link: string, text: string) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href={link}>
        {text}
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

如果我尝试这样使用它，则不会出现任何错误：

{Copyright('https://hello.com', 'HELLO')}

但是，如果我尝试这样使用它：

<Copyright link={'https://hello.com'} text={'hello'}></Copyright>

即使在其他任何地方都未指定任何“ URL”，我仍会在链接上收到此错误：

Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

如何在第二种方法中使用此组件？建议使用铸造来解决类似的问题，但就我而言，将来可能会有多个链接用于调用该组件。

Answer 1

如果您想使用

<Copyright link={"https://hello.com"} text={"hello"} />

您需要像这样定义道具类型

props: { link: string; text: string }

用法：

function Copyright(props: { link: string; text: string }) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href={props.link}>
        {props.text}
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}