我刚开始尝试学习reactjs并找到了一些教程。他们所有人都告诉我要运行npx create-react-app .
等。我遇到的问题是,当我看到他们的App.js时,他们都有类,而我的却是function App() {...}
而不是class App extends Component
。同样与import语句相同。他们说import React, { Component } from 'react'
,而我说import React from 'react'
,我不确定是哪里出了问题,我该如何解决?
答案 0 :(得分:0)
有多种方法可以定义React组件-作为类组件或函数组件。
现在,后一种功能组件通常是首选的方式,除非您想对组件的lifecycle methods做一些真正想做的事情。
尽管如此,类组件仍然有效,并且您会经常在较早的在线教程中找到它们。
创建react应用创建一个功能组件App
,以帮助您入门:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
可以将其重写为类组件,如下所示:
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
如您所见,它稍微冗长一些,但完全有效。
您只需将函数替换为您正在遵循的示例代码中找到的类。
在这种情况下,请不要忘记除了Component
之外还导入react
–对于类组件,这是必需的,因为类需要扩展Component
。