Тип '{children: string;} 'не имеет общих свойств с типом' IntrinsicAttributes & IModalProps '

Question

Этот код:

import { Modal } from "office-ui-fabric-react/lib/Modal";
import * as React from "react";

export interface ISignInFormProps {
  showModal: boolean;
}

const SignInForm = () => {
  return <Modal>Hello</Modal>;
};

export default SignInForm;

Выдает следующую ошибку:

(9,11): Тип '{children: string;} 'не имеет общих свойств с типом' IntrinsicAttributes & IModalProps '.

Этот CodePen не отображает никаких ошибок - https://codepen.io/camden-kid/pen/aMmzKq?editors=0010

В чем причина проблемы и как ее можно решить?

Answer 1

У нас есть исправление для этой проблемы.TypeScript 3.x выявил ошибку при печати с возвращаемым значением нашей стилизованной утилиты, которое не использовало тип StatelessComponent React и, следовательно, не имело опору children.PR - здесь и должен быть доступен в нашем следующем ночном выпуске.

Answer 2

Вы не можете установить любые дочерние элементы, не элемент JSX (например, <div>Hello</div>), а не строку (как показано в вашем коде).

Известная проблема с использованием Fabric сTypeScript 3.3: https://github.com/OfficeDev/office-ui-fabric-react/issues/7874

Fix

Два способа:

• Перейдите к TypeScript 3.2, если вы хотите использовать Fabric на данный момент ?
• В качестве альтернативы добавьте fix.d.ts с содержанием: https://github.com/OfficeDev/office-ui-fabric-react/issues/7874#issuecomment-462432481

fix.d.ts:

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}