[英]Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js.尝试访问 RecipeList.js 和 Recipe.js 的 .props 时出现语法错误。
Here is a code sample for Recipe.js:这是 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 .props 错误截图
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应用程序运行良好且没有 chrome 控制台或终端错误的屏幕截图
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.我认为这与我的代码无关,而与 TypeScript 或某种带有 Javascript 的预设配置有关,用于 VScode 无法识别每个组件的 .props 属性,因为我在将React Tutorial Project构建到其中时遇到了类似的问题我的编辑器(为了确定起见,我什至从站点复制粘贴了最终的 index.js 代码),尽管该应用程序运行良好,没有编译时错误。
Screenshot of the same .prop errors after following React Tutorial遵循 React 教程后相同 .prop 错误的屏幕截图
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:解决这个问题的唯一方法是,如果我实际硬编码并为每个类创建一个 props 属性并将其设置为任何如下所示:
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您需要使用接口和 TypeScript 的 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>
)
}
}
.tsx
to indicate that it is a React file using TypeScript -> Recipe.tsx
.tsx
以表明它是一个使用 TypeScript -> Recipe.tsx
的 React 文件IRecipeState
to define the structure of your Component state ( this.state.fooBar
).IRecipeState
来定义组件状态的结构( this.state.fooBar
)。 It is ok to leave it empty for now, since you don't make use of the state.RecipeList.js
)RecipeList.js
)Basing on Klugjos answer.基于Klugjos 的回答。 You could do the same with React's functional component (FC) and use the useState Hook to manage the state.
您可以对 React 的功能组件 (FC) 执行相同操作,并使用 useState Hook 来管理状态。
import React, {FC} from 'react';
import "./Recipe.css";
interface IRecipeProps {
ingredients?: string[];
title?: string;
img?: string;
instructions?: string;
}
interface IRecipeState {
}
const Recipe:FC<IRecipeProps> = (props) => {
const { ingredients, title, img, instructions} = props;
ingredients.map(( ingredient, index) => (
<li key={index}>
{ ingredient}
</li>
));
return (
<div className="recipe-card">
Your render code here
</div>
)
}
You can also solve this issue with您也可以通过以下方式解决此问题
class Recipe extends React.Component<any, any>{
....
....
// The rest of your normal code
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.