React TypeScript Type xxx has no properties in common with type ...

jetsung

React TypeScript 函数子组件传递值报错 Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes' 的解决方法

使用方法

import React from 'react'

function ListItem() {
  return <div>ListItem</div>
}

class App extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        <ListItem>This is children</ListItem>
      </div>
    )
  }
}

export default App

报错信息

ERROR in src/App.tsx:15:10
TS2559: Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
    13 |     return (
    14 |       <div>
  > 15 |         <ListItem>This is children</ListItem>
       |          ^^^^^^^^
    16 |       </div>
    17 |     )
    18 |   }

解决方法
ListItem 函数添加参数的类型

function ListItem(props: any) {
  return <div>ListItem</div>
}

jetsung

若是在定义函数形参的解构，报错

代码

function ListItem({ children }) {
  return <div>ListItem, {children}</div>
}

错误信息

TS7031: Binding element 'children' implicitly has an 'any' type.
    1 | import React from 'react'
    2 |
  > 3 | function ListItem({ children }) {
      |                     ^^^^^^^^
    4 |   return <div>ListItem, {children}</div>
    5 | }

解决方法

方法一

function ListItem({ children }: any) {
  return <div>ListItem, {children}</div>
}

方法二

const ListItem = ({ children }: any) => {
  return <div>ListItem, {children}</div>
}

或者使用 FC 修正

import React, { FC } from 'react'
const ListItem: FC<any> = ({ children }) => {
  return <div>ListItem, {children}</div>
}