Question

我在asp.net核心应用程序中使用typescript和react.js。我收到错误TS属性'人'在类型readonly上不存在。谁能告诉我如何克服这个问题？

export default class HelloWorld extends React.Component<{}, {}> {
    constructor(props: any) {
        super(props);
        this.state = {
            persons: [
                        { name: 'Max', age: 28 },
                        { name: 'Max', age: 28 }
                    ]
        }
    }

    public render() {
        return (
            <div>
                <Person {this.state.persons[0].name} age="28"> My hobbies: racing</Person>
            </div>
        );
    }


import * as React from 'react';

const person = (props: any) => {
    return (
    <div>
            <p> Im {props.name} {props.age}</p>
            <p>{props.children}</p>
    </div>
    ) 

};

export default person;

由于

Answer 1

看起来您需要将您指定的状态类型标记为只读状态。

import * as React from 'react'

interface HelloWorldI {
     persons: ReadonlyArray<PersonI>
}

interface PersonI {
     name: string,
     age: number
}

export default class HelloWorld extends React.Component<{}, HelloWorldI> {
constructor(props) {
    super(props)
    const p: ReadonlyArray<PersonI> = [
        { name: 'Max', age: 28 },
        { name: 'Max', age: 28 },
    ]

    this.state = {
        persons: p,
    }
}

public render() {
    return (
        <div>
          <Person name={this.state.persons[0].name}
                  age= {this.state.persons[0].age}>
          My hobbies: racing
          </Person>
        </div>
    )
  }
}

class Person extends React.Component<{name: string, age: number}, {}>     {
  render() {
    return( <p>{this.props.name} and {this.props.age}</p> )
  }
}

使用typescript了解React.js状态

1 个答案: