已修复:我已全局卸载了VScode,Typescript和eslint。一旦我重新安装了VScode,一切都会恢复正常。
更新:安装@ types / react库后,我仍然仅对Property 'props' does not exist on type 'Home'或TypeScript Property 'props' does not exist中提到的RecipeList.js和Recipe.js 都得到类似的错误。 :
类型'Readonly <{children?:ReactNode;不存在属性'recipes'。 }>和只读<{}>'。
原始内容:因此,我是React的新手,由于某种原因,VSCode上尝试同时访问RecipeList.js和Recipe.js的.props时遇到语法错误。
这是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 app working fine with no chrome console or terminal errors
我认为这与我的代码无关,而与TypeScript或VScode Java的某种预设配置有关,却很难确定每个组件的.props属性,因为在构建{ {3}}进入我的编辑器(我什至可以肯定地从站点复制了最终的index.js代码),尽管该应用程序运行良好,没有编译时错误。
解决此问题的唯一方法是,如果我实际上对每个类进行了硬编码并创建了props属性,并将其设置为以下任何一种方式:
Screenshot of the same .prop errors after following React Tutorial
任何想法都值得赞赏!非常感谢!即使该应用程序可以正常工作,但由于编辑器中弹出的这个毫无意义的错误,我还是有一些OCD。
PS:这是我更新的依赖项
"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"
}
答案 0 :(得分:5)
您需要使用interface和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
Recipe.tsx
,以指示它是一个React文件。
IRecipeState
定义组件状态(this.state.fooBar
)的结构。可以暂时将其保留为空,因为您不使用状态。RecipeList.js
)的组件执行相同操作答案 1 :(得分:0)
基于 Klugjos 答案。您可以对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>
)
}
答案 2 :(得分:0)
你也可以用
解决这个问题class Recipe extends React.Component<any, any>{
....
....
// The rest of your normal code
}