React.isValidElement(obj) 确定 obj 为 React.ReactElement<{}> 类型答案

【问题标题】：React.isValidElement(obj) determines obj to be React.ReactElement<{}> typeReact.isValidElement(obj) 确定 obj 为 React.ReactElement<{}> 类型
【发布时间】：2019-01-20 07:17:47
【问题描述】：

我有以下代码

// type def
interface Props: { children: React.ReactNode }

React.Children.map(this.props.children, child => {

  // uh-oh!
  if (React.isValidElement(child)  && child.props.children) {
    // do sth
  }
}

导致打字稿错误的原因：

语义错误 TS2339 属性“children”不存在于类型“{}”上

执行前child的类型React.isValidElement是React.ReactNode定义为：

type React.ReactNode = 
  | string 
  | number 
  | boolean 
  | {} 
  | React.ReactElement<any> 
  | React.ReactNodeArray 
  | React.ReactPortal 
  | null 
  | undefined

但在执行React.isValidElement 后，类型脚本确定子元素为React.ReactElement<{}> - 它期望元素具有空的props，这会导致错误，因为它假定元素中没有道具children。代码无法编译。

我错过了什么吗？有没有办法解决这个问题？

我的tsconfig:

  "compilerOptions": {
    "outDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "declaration": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "skipLibCheck": true
  },
  "include": ["./src/**/*"],
}

打字稿：3.2.0
@types/react": ^16.3.13"
@types/react-dom": ^16.0.5"

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

如果你知道你期望什么样的元素，你可以传递一个类型参数给React.isValidElement。

替换这个：

React.isValidElement(child)

用这个：

React.isValidElement<Props>(child)

【讨论】：