Question

使用React.SFC时，打字稿会出现以下错误：

Type '({ children }: { children?: ReactNode; }) => Element' is not 
assignable to type 'StatelessComponent<{}>'.
 Type 'Element' is not assignable to type 'ReactElement<any>'.
  Types of property 'type' are incompatible.
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.
    Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.
      Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
        Types of property 'propTypes' are incompatible.
          Type 'React.ValidationMap<any> | undefined' is not assignable to type 'import("/Users/jbernal/Documents/projects/BoostMobileUI/node_modules/@types/prop-types/index").ValidationMap<any> | undefined'.
            Type 'React.ValidationMap<any>' is not assignable to type 'import("/Users/jbernal/Documents/projects/BoostMobileUI/node_modules/@types/prop-types/index").ValidationMap<any>'.
              Index signatures are incompatible.
                Type '((object: any, key: string, componentName: string, ...rest: any[]) => Error | null) | undefined' is not assignable to type 'Validator<any>'.
                  Type 'undefined' is not assignable to type 'Validator<any>'.

这是代码：

import * as React from 'react';

import './Sidebar.scss';

export const Sidebar: React.SFC = ({ children }) => (
  <aside className="sidebar">
   {children}
  </aside>
);

例如，当将这种类型的组件作为Tooltip的子级传递到Material的react-ui库中时，我也在其他地方遇到ValidationMap问题。

Answer 1

我也遇到了这个问题，来到这里寻找答案。

结果是，我正在一个纱线工作区monorepo上工作，并且使用不同版本的node_modules有多个@types/react。

这是为我解决问题的原因：

在每个package.json上使所有依赖项都指向相同的版本；
删除所有node_modules文件夹（也许也删除yarn.lock文件）；
运行yarn install

React.SFC给出Element vs ReactElement <any>错误，ValidationMap

1 个答案: