Блог

У меня есть компонент, который отображает содержимое вкладки. Он просто определяет, являются ли дочерние элементы только дочерними, и если нет, он помещает их в div. Он также может (необязательно) применять prop со стилями путем клонирования дочернего элемента. Я написал этот компонент много месяцев назад, затем обновил некоторые библиотеки и TypeScript. Сегодня я просматриваю его код и вижу ошибки.

Компонент

 import * as React from 'react';

export interface PageTabContentShape {
  title: string;
  pageTabName?: string;
  withContainer?: boolean;
  containerStyle?: React.CSSProperties;
  labelTestid?: string;
  children: React.ReactElement;
}

export const PageTabContent: React.ComponentType<PageTabContentShape> = (props) => {
  let child = React.Children.only(props.children);
  if (props.withContainer) {
    return (
      <div style={props.containerStyle}>
        {child}
      </div>
    );
  }
  // pass styles to only child when there is no wrapper
  if (props.containerStyle amp;amp; React.isValidElement<{ containerStyle }>(child)) {
    child = React.cloneElement(child, { containerStyle: props.containerStyle });
  }
  if (null != child) {
    return child;
  }
  return null;
};
 

Ошибки:

 Argument type ReactElement<{containerStyle}> is not assignable to parameter
type DetailedReactHTMLElement<HTMLAttributes<HTMLElement>, HTMLElement> 
 

и

 Argument type {containerStyle: React.CSSProperties} is not assignable to parameter
type HTMLAttributes<HTMLElement> | undefined 
 

Место ошибок:

Я пробовал разные подходы, добавляя нулевые проверки и возвращаясь раньше с null, добавляя утверждения типа as ReactNode или as ReactElement . Но я не могу заставить TypeScipt выбрать другое определение cloneElement метода, которое я вижу в index.d.ts of @types/React

Вопрос

Как я могу правильно объявить этот компонент, чтобы ошибки TypeScript исчезли? Если это возможно, я хотел бы сделать это без утверждения типов. Если это возможно, мне нужно сделать это без каких-либо обновлений NPM (возможно, потребуется небольшое обновление).

Используемые пакеты:

• «@types/react»: «16.9.1»,
• «реагировать»: «16.9.0»,
• «typescript»: «3.8.2»,