reactjs - 错误:第 8 行解析错误意外令牌
问题描述
意外的标记
不知道哪里出错了。我只是跟着书。
import React, { Component } from 'react';
import HelloWorld from './HelloWorld';
class App extends Component
{
return(
<div>
<HelloWorld />
<HelloWorld />
<HelloWorld />
</div>
);
};
我想知道为什么这可能是一个错误。
解决方案
使用React.Component
,您需要定义一个渲染方法来返回您的 DOM。您可以在React.Component 文档中找到更多详细信息。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
您可能已经将一些示例与新的闪亮语法react hooks混淆了,它现在使用 afunction object
而不是 a class object
:
Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
推荐阅读
- amazon-web-services - AWS 控制塔和组织
- mongodb - Group 或 Group By 支持不适用于 mongodb yii2
- javascript - 三.js ObjectLoader 不解析来自worker的对象
- reactjs - React - 呈现任何传递的组件的动态路由包装器
- api - 在通过 POSTMAN 进行测试时,如何使 Basic Auth 和 OAuth 2.0 一起用于 Mule API?
- javascript - 如何在 HTML 或 javascript 中调用 PHP 函数
- plotly - Plotly Waterfall 值被 xaxis 截断
- postgresql - 将多个表连接到父表时获取子表的名称
- google-api - 跟踪昵称为 Meets 出勤率
- kotlin - Kotlin 1.5 频道 trySendBlocking() 与 trySend()