输入'{ 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): Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & IModalProps'.

此 CodePen 未显示任何错误 - https://codepen.io/camden-kid/pen/aMmzKq?editors=0010

问题的原因是什么，如何解决？

Answer 1

你不能设置 any children，不是 JSX 元素（例如 <div>Hello</div>），也不是字符串（如你的代码所示）。

在 TypeScript 3.3 中使用 Fabric 的已知问题：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 暴露了我们样式化实用程序的 return 值的输入错误，它没有使用 React 的 StatelessComponent 类型，因此没有 children 属性。 PR 是 here，应该会在我们的下一个夜间版本中提供。