属性'XYZ'在类型'Readonly< {children ?: ReactNode;上不存在. }> &只读< {}>' [英] Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

问题描述

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

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

这是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>
        )
    }
}

.props错误的屏幕截图

但是，该项目没有引发编译时错误，并且网站运行正常.

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

应用截图良好，没有Chrome控制台或终端错误

我认为这与我的代码无关，而与TypeScript或VScode Java的某种预设配置有关，却很难确定每个组件的.props属性，因为在构建<一个href ="https://reactjs.org/tutorial/tutorial.html" rel ="nofollow noreferrer">反应教程项目到我的编辑器中(我什至只复制了最终站点中的index.js代码可以确定)，尽管该应用程序运行良好，没有编译时错误.

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.

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

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

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:

仅针对语法错误的解决方案的屏幕截图

这是我更新的依赖项

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

• 我将使用TypeScript-> Recipe.tsx
将文件扩展名更改为.tsx以指示它是一个React文件.
• 请调整类型(字符串)以适合您的数据.
• 使用IRecipeState定义组件状态(this.state.fooBar)的结构.可以暂时将其保留为空，因为您不使用状态.
• 确保对其他引发错误(RecipeList.js)的组件执行相同操作
• 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&lt; {children ?: ReactNode;上不存在. }&gt; &amp;只读&lt; {}&gt;'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！