TS2339:'Home'类型中不存在属性'props'

Question

我有一个非常基本的与tsx反应的程序,我收到一个错误,我无法弄清楚为什么

import React from 'react';
// import {connect} from 'react-redux'

export class Home extends React.Component {    
    render(){
        console.log(this.props)
        return (
            <div>Working</div>
        )
    }
}


import * as React from 'react'
import * as ReactDOM from 'react-dom';
import {Home} from './Components/Home.component'
class App extends React.Component<any,any>{
render(){
    return(
        <Home value="abc" />
    )
  }
}
ReactDOM.render( <App />, window.document.getElementById("app"))

git克隆这个代码

Answer 1

在拉下你的回购并检查之后,我意识到你没有针对打字稿做出反应.

键入是管理和安装TypeScript定义的简单方法

添加此行

"@types/react": "^16.0.25" // or another version you prefer

在package.json运行npm i一个更多的时间来解决这个问题.尝试一下,让我知道这是否解决了你的问题:)

PS:TypeScript要求您描述对象和数据的形状.如果你看一下我之前提供的另一个答案,那就是一个更长,更复杂的版本你需要指定一个描述你的道具的类型,并且需要将它传递给有问题的组件

Answer 2

Typescript需要知道它的形状props并state传递给一个组件.如果你真的想要阻止Typescript在你的组件中强制执行打字(顺便说一下,这打败了使用Typescript的整个目的),那么,需要访问props或state传递给它的组件必须指定类型或形状可以这么说,作为any.也就是说,您的组件看起来像这样

export class Home extends React.Component<any, any>

而不仅仅是props,如果该类期望state和any,这也是一种不正确的扩展类的方法.

传递props类型state并且props意味着所讨论的组件必须接受任何形状(类型)用于state和props.

试试这个

export class Home extends React.Component

一切都应该按照预期的方式工作,因为你在类型检查方面得到了打字稿.

您还可以在此处查看演示

如果你真的想强制执行state和/或interface你的形状(类型),那么你必须通常使用prop或内联类型注释来定义这些形状.以下是使用前一种方法强制使用道具形状的上述相同代码的示例:

import * as React from "react";
import * as ReactDOM from 'react-dom';

export class Home extends React.Component<any, any> {
  render() {
    console.log(this.props)
    return (
      <div>Working</div>
    )
  }
}

class App extends React.Component{
  render() {
    return (
      <Home value="abc" />
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

现在,在这里,您永远无法向界面中未定义Home的Props组件添加任何其他内容somethin.例如做类似的事情:

import * as React from "react";
import { render } from "react-dom";

interface Props {
  value:string,
  name:string
}

export default class Home extends React.Component<Props>{
  render() {
    console.log(this.props)
    return (
      <div>Working. The props values are: {this.props.value} {this.props.name}</div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Home value="abc" name="def"/>
    )
  }
}

render(<App />, document.getElementById("root"));

不会编译,因为interface未在组件Home使用的中定义state.

为了强制props你的形状,你必须做同样的事情props,即定义合同(接口).另外,请注意您仍需要访问thisvia PropsNOT,props因为这只是结构的类型定义,而不是值本身的持有者.

您可以在此处查看此替代方案的演示