TypeScript: передача реквизита детям

Question

Здравствуйте, у меня проблема с передачей моих реквизитов детям:

interface RootState {
  sideIsOpen: boolean;
  isOpen: boolean;
}

const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideIsOpen;
  const sideIsOpen = useSelector(selectIsOpen);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideIsOpen} />
    </SideNav>
  );
};

и моим детям:

const LogoNavigation: React.FC = (props) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  );
};

Я получил эту ошибку:

Тип '{isOpen: логическое значение; } 'нельзя присвоить типу IntrinsicAttributes & {children ?: ReactNode; }». Свойство isOpen не существует для типа IntrinsicAttributes & {children ?: ReactNode; } '. ts (2322)

Answer 1

Вы должны объявить, что ваш LogoNavigation компонент ожидает получить isOpen.

Вы можете сделать это с интерфейсом, должно быть что-то вроде этого: (Он не был протестирован)

interface InterfaceName {
  isOpen: boolean
}

const LogoNavigation: React.FC<InterfaceName> = ({isOpen}) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  )
}

Надеюсь, это поможет.

Answer 2

Вам необходимо объявить компонент LogoNavigation, чтобы он принимал isOpen prop. для этого вы можете определить интерфейс или сделать это, как показано ниже

function LogoNavigation(props: { isOpen: boolean }) {

  return <div />;
}