React TypeScript 类子组件传值报错 Type xxx is not assignable to type IntrinsicAttributes

jetsung

React TypeScript 类子组件传递值报错 Type '{ msg: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SonC> & Readonly<{}> 的解决方法

使用方法

class SonC extends React.Component {
  render(): React.ReactNode {
    return <div>类子组件: {this.props.msg}</div>
  }
}
...
<SonC msg={this.state.message} />

报错信息

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: {} | Readonly<{}>): SonC', gave the following error.
    Type '{ msg: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SonC> & Readonly<{}>'.
      Property 'msg' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SonC> & Readonly<{}>'.
  Overload 2 of 2, '(props: {}, context: any): SonC', gave the following error.
    Type '{ msg: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SonC> & Readonly<{}>'.
      Property 'msg' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SonC> & Readonly<{}>'.

解决方法

class SonC extends React.Component<any> {
  render(): React.ReactNode {
    return <div>类子组件: {this.props.msg}</div>
  }
}
...
<SonC msg={this.state.message} />