将属性传递给反应组件。出现错误 - 类型“只读<{}>”上不存在属性“firstName”答案

【问题标题】：Passing properties to react component.Getting Error - Property 'firstName' does not exist on type 'Readonly<{}>'将属性传递给反应组件。出现错误 - 类型“只读<{}>”上不存在属性“firstName”
【发布时间】：2022-01-04 13:14:25
【问题描述】：

请耐心等待，新手在这里反应

我正在尝试做一个看似简单的组件，它包含名字和姓氏，允许用户更改值并在按钮单击时显示更新的值。似乎无法克服这些 TS 编译错误：

1.add-user.tsx

import * as React from "react";
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

type addUserProps = {
    firstName: string,
    lastName: string
}

class AddUser extends React.Component {
    constructor(props: addUserProps) {

        super(props);

        this.state = {
            firstName: props.firstName,
            lastName: props.lastName,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        //'firstName' does not exist on type 'Readonly<{}>'
        //alert(this.state.firstName);
    }

    render() {
        return (
            <div>
                <TextField id="firstName" label="First Name" variant="outlined" value={this.state.firstName} />
                <TextField id="lastName" label="Last Name" variant="outlined" value={this.state.lastName}  />
                <Button variant="contained" onClick={this.handleClick}>Add Candidate</Button>
            </div>
        );
    }
}

export default AddUser

得到以下错误：

类型“只读”上不存在属性“firstName”

类型“只读”上不存在属性“lastName”

2.尝试这样调用组件：

import * as ReactDOM from "react-dom"
import AddUser from "./lib/add-user"

ReactDOM.render(
    <div>
        <AddUser firstName="John" lastName="Doe" />
  </div>,
  document.getElementById("root2")
  
);

得到以下错误：

严重性代码描述项目文件行抑制状态错误 TS2322 (TS) 类型 '{ firstName: string;姓氏：字符串； }' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。属性 'firstName' 不存在于类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

请参考typing class component props的文档

你应该这样做

class Component extends React.Component<MyProps, MyState>

【讨论】：