属性 'XYZ' 不存在于类型 'Readonly<{children?: ReactNode;}&gt;&amp;只读<{}>' [英] Property &#39;XYZ&#39; does not exist on type &#39;Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;{}&gt;&#39;

问题描述

尝试访问 RecipeList.js 和 Recipe.js 的 .props 时出现语法错误.

这是 Recipe.js 的代码示例:

import React, {Component} from 'react';导入./Recipe.css"；类食谱扩展组件{//道具:任意；取消注释这将修复错误使成为() {//不必在 JSX 中使用返回和括号作为箭头const成分 = this.props.ingredients.map((ing, ind) => (<li key={ind}>{ing}</li>));const {title, img, instructions} = this.props返回 (<div className="recipe-card"><div className="recipe-card-img"><img src={img} alt={title}/>

<div className="recipe-card-content"><h3 className="recipe-title">{标题}<h4>原料:<ul>{配料}<h4>指示:<p>{指示}</p>

)}}

.props 错误截图

但是，该项目没有引发任何编译时错误，并且网站运行良好.

应用程序运行良好且没有 Chrome 控制台或终端错误的屏幕截图

我认为这与我的代码无关，而与 TypeScript 或某种带有 Javascript 的预设配置有关，用于 VScode 无法识别每个组件的 .props 属性，因为我在构建 React Tutorial Project 到我的编辑器中(我什至从站点复制粘贴了最终的 index.js 代码，只是为了确保)，尽管应用程序运行良好，没有编译时错误.

遵循 React 教程后相同 .prop 错误的屏幕截图

解决这个问题的唯一方法是，如果我实际硬编码并为每个类创建一个 props 属性并将其设置为任何像这样:

语法错误唯一解决方案截图

这是我更新的依赖项

依赖关系":{@types/react":^16.4.13"，道具类型":^15.6.2"，反应":^16.5.0"，react-dom":^16.5.0"，反应脚本":1.1.5"，打字稿":^3.0.3"；}

解决方案

您需要使用 interface 和 TypeScript 对 React.Component 的通用实现

import React, {Component} from 'react';导入./Recipe.css"；接口 IRecipeProps {成分?:字符串[]；标题?:字符串；img?: 字符串；指令?:字符串；}接口 IRecipeState {}class Recipe extends Component{使成为() {const成分 = this.props.ingredients.map((ing, ind) => (<li key={ind}>{ing}</li>));const {title, img, instructions} = this.props返回 (<div className="recipe-card">你的渲染代码在这里

)}}

• 我会将文件扩展名更改为 .tsx 以表明它是一个使用 TypeScript 的 React 文件 -> Recipe.tsx
• 请调整类型(字符串)以适合您的数据.
• 使用IRecipeState 来定义组件状态的结构(this.state.fooBar).现在可以将其留空，因为您不使用状态.
• 确保对其他引发错误的组件执行相同操作 (RecipeList.js)

I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js.

Here is a code sample for Recipe.js:

import React, {Component} from 'react';
import "./Recipe.css";

class Recipe extends Component {

    // props: any; uncommenting this will fix the bug

    render() {
        // don't have to use return and parentheses for arrow with JSX
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                <div className="recipe-card-img">
                    <img src={img} alt={title}/>
                </div>
                <div className="recipe-card-content">
                    <h3 className="recipe-title">
                        {title}
                    </h3>
                    <h4>
                        Ingredients:
                    </h4>
                    <ul>
                        {ingredients}
                    </ul>
                    <h4>
                        Instructions:
                    </h4>
                    <p>
                        {instructions}
                    </p>
                </div>
            </div>
        )
    }
}

Screenshot of .props error

However, the project throws no compile-time errors and the website works perfectly fine.

Screenshot of app working fine with no chrome console or terminal errors

I'm thinking this less has to do with my code and more so with TypeScript or some sort of preset config with Javascript for VScode having trouble identifying the .props property for each component because I get similar problems when I built the React Tutorial Project into my editor (I even copy pasted the final index.js code from the site just to be sure), despite the app working fine with no compile-time errors.

Screenshot of the same .prop errors after following React Tutorial

The only way to solve this problem is if I actually hardcode and create a props property for each class and set it to any like so:

Screenshot of only solution to the syntax error

Here are my updated dependencies

"dependencies": {
  "@types/react": "^16.4.13",
  "prop-types": "^15.6.2",
  "react": "^16.5.0",
  "react-dom": "^16.5.0",
  "react-scripts": "1.1.5",
  "typescript": "^3.0.3"
 }

解决方案

You need to define what your props and state will look like using an interface and TypeScript's generic implementation of React.Component

import React, {Component} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

class Recipe extends Component<IRecipeProps, IRecipeState> {
    render() {
        const ingredients = this.props.ingredients.map((ing, ind) => (
            <li key={ind}>{ing}</li>
        ));
        const {title, img, instructions} = this.props

        return (
            <div className="recipe-card">
                Your render code here
            </div>
        )
    }
}

• I would change the file extension to .tsx to indicate that it is a React file using TypeScript -> Recipe.tsx
• Please adjust the types (strings) to fit your data.
• Use IRecipeState to define the structure of your Component state (this.state.fooBar). It is ok to leave it empty for now, since you don't make use of the state.
• Make sure you do the same for your other Component that throws an error (RecipeList.js)

这篇关于属性 'XYZ' 不存在于类型 'Readonly<{children?: ReactNode;}&gt;&amp;只读<{}>'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！