TS2339：“家”类型上不存在属性“道具”

Posted 2023-02-22

【中文标题】TS2339：“家”类型上不存在属性“道具”

【英文标题】：TS2339: Property 'props' does not exist on type 'Home'

【发布时间】：2018-05-03 09:55:11

【问题描述】：

我有一个非常基本的 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 clone this 获取代码

【问题讨论】：

你是否将 props 传递给这个组件？请进一步说明

这似乎是打字稿类型问题

请详细说明，向我们展示传递道具的父组件

查看任何 react typescript 示例，您应该扩展 React.Component<any, any>。我觉得你正在使用 typescript 编译器，但实际上是在编写纯 javascript。

React.Component 试过了，但是不行

【参考方案1】：

在拉下你的 repo 并检查它之后，我意识到你没有 react typings 用于 typescript。

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

添加这一行

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

到package.json 并运行npm i 或yarn 如果您使用yarn 作为包管理器，再一次解决了这个问题。

试试看，如果这能解决你的问题，请告诉我:)

PS：TypeScript 要求您描述对象和数据的形状。如果您查看我之前提供的other answer，它几乎是一个冗长而复杂的版本您需要指定一个描述您的道具的类型，并且需要将其传递给相关组件

【讨论】：

我之前试过了，它不起作用，但现在它起作用了。非常感谢您的时间和精力

我已经在 devDependencies 中定义了这个，我正在尝试添加依赖让希望

对不起，我不明白

@Audiopolis 似乎是什么问题

@Siya 我的情况与 OP 的情况几乎完全相同，但添加反应类型并没有解决错误。然而，定义道具的形状确实解决了这个问题。也许我有更严格的配置或其他东西。我是 TypeScript 的新手，所以我相信我很快就会理解得更好。感谢您的回复！

【参考方案2】：

Typescript 需要知道传递给组件的 props 和 state 的形状。如果你真的想阻止 Typescript 在你的组件中强制输入（顺便说一句，这违背了使用 Typescript 的全部目的），那么，需要访问传递给它的 props 或 state 的组件必须指定可以说是类型或形状，如any。也就是说，你的组件看起来像这样

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

而不是

export class Home extends React.Component

顺便说一句，如果该类需要props 和/或state，那么这是一种不正确的扩展类的方式。

为props 和state 传递any 类型意味着相关组件必须接受props 和state 的任何形状（类型）。

试试这个

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"));

并且一切都应该按预期工作，因为您在类型检查方面让 Typescript 不受影响。

您也可以查看演示here

如果您确实想强制使用props 和/或state 的形状（类型），则通常必须使用interface 或inline type annotation 来定义这些形状。下面是上面相同代码的示例，它使用前一种方法强制道具的形状：

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"));

现在，您永远无法将任何其他 prop 添加到未在 Props 接口中定义的 Home 组件。 例如做类似的事情：

<Home value="abc" name="DEF" somethin="else"/>

无法编译，因为somethin 未在Home 组件使用的interface 中定义。

要强制state 的形状，您必须执行与props 相同的操作，即定义一个合同（接口）。 另外请注意，您仍然需要通过this 而不是Props 访问您的props，因为这只是结构的类型定义，而不是值本身的持有者。

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

【讨论】：

我认为这不是问题，为 props 创建一个接口并定义 props 类型只是为了验证，我创建了可能没有接口 props 的组件，它曾经可以正常工作

好吧，我已经对此进行了测试，如果没有在某处定义道具的形状，它就无法工作。唯一有效的时候是我命令组件接受任何类型的道具。

您在哪个版本的 Typescript 中遇到上述错误？与您编写不需要 props 或 state 结构的组件的版本相同吗？

我的依赖项“css-loader”：“^0.28.7”，“react”：“^16.1.1”，“react-dom”：“^16.1.1”，“react- redux”：“^5.0.6”，“redux”：“^3.7.2”，“style-loader”：“^0.19.0”，“ts-loader”：“^3.1.1”，“typescript” : "^2.6.1", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.4"

好的，谢谢。您是否尝试过上述建议的方法？此外，您不需要为道具创建接口。这是答案的第二部分，我提到当且仅当您想为您的道具和/或状态强制执行某种结构时，您才会采用这种方法