编译错误意外令牌"<"我的第一个应用程序 React

Question

这是我第一个使用react的应用程序，也是在线课程的一部分。一切都很好，直到我在一个单独的文件中创建了一个组件来接收道具。我认为重要的是要注意，由于讲师的规范，这个文件更改了名称和位置，但它仍然不打电话，也就是说，我不知道这是否影响了它。另一件事是，当我修改代码并刷新浏览器时，指示编译错误，但它没有考虑代码的修改，我必须关闭命令行屏幕并重新启动yarn，以便它看到应用的更改。

export default class DishComents extends Component {
render() {
return (
<div>
<Card>
<CardBody>
<CardTitle>{this.props.name}</CardTitle>
<CardText>{this.props.coments}</CardText>
</CardBody>
</Card>
</div> 

);
}
}

]1

Answer 1

您能检查错误是否在这个文件中吗？

这就是你的文件的样子：

import React, { Component } from "react";
export default class DishComents extends Component {
render() {
return (
<div>
<Card>
<CardBody>
<CardTitle>{this.props.name}</CardTitle>
<CardText>{this.props.coments}</CardText>
</CardBody>
</Card>
</div>
);
}
}

也许错误在另一个文件中，你能检查一下吗？

编辑：尽量做到无状态，因为你没有任何状态。

import React from "react";
export default function DishComents(props) {
return (
<div>
<Card>
<CardBody>
<CardTitle>{props.name}</CardTitle>
<CardText>{props.coments}</CardText>
</CardBody>
</Card>
</div>
);
}