машинописное значение "{text, comp}: NavProps & Comp <NavProps>"?

Question

Я новичок в машинописном тексте и сталкиваюсь с некоторыми кодами вроде следующего.

export interface Comp<T> {
  comp: (props: T) => JSX.Element;
}

export interface NavProps {
  text: string;
}

export default function Nav({text, comp}: NavProps & Comp<NavProps>) {
  let renderProps: NavProps = {
    text: text,
  };
  return comp(renderProps);
}

Некоторые наименования могут сбивать с толку, но я не хочу испортить рабочие коды.

Что намереваются делать коды? В частности, что это? {text, comp}: NavProps & Comp<NavProps>

Answer 1

Этот код в целом выглядит как компонент React .

{text, comp}: NavProps & Comp<NavProps> объявляет параметр функции, но использует деструктуризацию .

В основном

export default function Nav({text, comp}: NavProps & Comp<NavProps>) {
  let renderProps: NavProps = {
    text: text,
  };
  return comp(renderProps);
}

будет таким же, как:

export default function Nav(props: NavProps & Comp<NavProps>) {
  let renderProps: NavProps = {
    text: props.text,
  };
  return props.comp(renderProps);
}