React + Typescript错误

时间:2018-04-16 12:09:30

标签: reactjs typescript

我刚刚开始学习React,并认为与TS一起学习它可能是一个好主意,但我一直在收到这个错误,并且无法找到解决方法如何解决它

[ts] Property 'todos' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ToDoList> & Readonly<{ children?: ReactNode; }> & ...'.

这是我的代码:

const TODOS: object[] =  [
    {
        id: 1,
        name: 'Todo 1'
    },
    {
        id: 2,
        name: 'Todo 2'
    }
]

const App: React.SFC = (): JSX.Element => {
    return (
        <ToDoList todos={TODOS}/>
    )
}

interface IProps {
    readonly todos: object[]
}

class ToDoList extends React.Component<{},IProps> {
    static props: IProps

    render() {
      return (
        <div>{this.props.todos.map((item: any) => {
            return <h1>item.name</h1>
        })}</div>
    )
}

}

export default App;

我有什么遗失的吗?

2 个答案:

答案 0 :(得分:3)

您的通用参数到React.Component的顺序是错误的,第一个参数应该是道具。改为

class ToDoList extends React.Component<IProps> { }

如果您不使用第二个参数,则不必指定它。

答案 1 :(得分:1)

第一个通用参数是props,第二个参数是state。 变化:

class ToDoList extends React.Component<{},IProps> {

class ToDoList extends React.Component<IProps,{}> {