输入'{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

您不能设置任何子级，不能设置JSX Element（例如<div>Hello</div>），不能设置字符串（如代码所示）。

将Fabric与TypeScript 3.3一起使用的已知问题：https://github.com/OfficeDev/office-ui-fabric-react/issues/7874

修复

两种方法：

• 如果您现在想使用Fabric，请移至TypeScript 3.2
• 或者添加一个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>;
}

Answer 2

我们已解决此问题。 TypeScript 3.x暴露了我们样式化的实用程序的返回值的输入错误，该返回值未使用React的StatelessComponent类型，因此没有children属性。 PR是here，应该在我们的下一个每晚版本中提供。