类型 'string' 不可分配给类型 '(url: string) => string'.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>

我在 link 上收到此错误，即使我没有在其他任何地方指定任何 'url'：

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

如何通过第二种方法使用此组件？ A similar question suggested to use casting 但在我的例子中，可以有多个 links 我想在未来调用组件。

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>
  );
}

类型 'string' 不可分配给类型 '(url: string) => string'.ts(2322)

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

javascript

typescript

reactjs

material-ui

react-component