前言

在学习 React + TS 的项目中，父子组件传参报错：类型“Readonly<{}>”上不存在属性“name”。本文主要记录下此问题解决方法。

 一、报错代码如下

import React from "react";
import './index.css'

// 类组件
class Hello extends React.Component {
  state = {
    value: 'name'
  }
  handleClick = (e: React.MouseEvent, msg: string) => {
    console.log('hello class component', e, msg)
  }
  handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      value: e.target.value
    })
  }
  render() {
    return (
      <>
        <div onClick={e => this.handleClick(e, 'msg')}>hello</div>
        <input type="text" value={this.state.value} onChange={e => this.handleChangeName(e)} />
        <p>输入值为：{this.state.value}，当前名称是：{this.props.name}, 年龄是{this.props.age}</p>
      </>
    )
  }
}

function Test() {
  return (
    <>
      <Hello name="hello" age={2}></Hello>
    </>
  )
}

export default Test()

 子组件通过 props 接收父组件传过来的数据时，ts 报错，截图如下：

二、报错原因

ts 根据组件的 props 属性对组件进行类型检查。react.d.ts 文件定义了 React.Component<Props, State>，传参时应该使用自己所需的 Props 和 State 声明扩展它。

三、解决问题

定义 Props 属性所需的类型。

interface PropsType {
  name: string,
  age: number
}

具体代码如下：

import React from "react";
import './index.css'

interface PropsType {
  name: string,
  age: number
}

// 类组件
class Hello extends React.Component<PropsType> {
  state = {
    value: 'name'
  }
  handleClick = (e: React.MouseEvent, msg: string) => {
    console.log('hello class component', e, msg)
  }
  handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      value: e.target.value
    })
  }
  render() {
    return (
      <>
        <div onClick={e => this.handleClick(e, 'msg')}>hello</div>
        <input type="text" value={this.state.value} onChange={e => this.handleChangeName(e)} />
        <p>输入值为：{this.state.value}，当前名称是：{this.props.name}, 年龄是{this.props.age}</p>
      </>
    )
  }
}

function Test() {
  return (
    <>
      <Hello name="hello" age={2}></Hello>
    </>
  )
}

export default Test()

页面效果：