Тип 'string' нельзя назначить типу (url: string) => string'.ts (2322)

Question

У меня есть этот компонент авторского права материала:

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