我刚刚完成输入 npx create react app 来创建一个react应用程序，但由于某种原因，我的 App.js 是一个函数而不是一个类，例如）
结果：
function App() {
return ()
我想要这样的东西：
Class app extends components{
render (return())
}
我可以手动写下来，但我希望在创建应用程序时将类应用程序作为默认设置，所以有人能告诉我这是什么原因吗？
如何在 App.js 中创建没有函数的 React.js 应用程序
IT技术
reactjs
create-react-app
2021-05-26 01:31:01
3个回答
现在对于 React 来说，这是开箱即用的。您可以使您的 App.js 成为无状态功能组件或类组件。
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
随着在 React 16.8 中引入钩子，功能组件可以是有状态的，并且在大多数情况下应该替换类组件。这就是为什么App项目中的功能组件是用 生成的create-react-app，更具体地说是react-scripts包。
可以使用 oldreact-scripts作为模板来初始化项目：
create-react-app foo --scripts-version react-scripts@^2
然后更新到最新版本：
npm -S react-scripts@^3
由于create-react-app为项目提供静态样板，并且没有脚手架功能，因此可以App从以前的react-scripts版本复制和粘贴：
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;
正如@FaizanMubasher 所提到的，类组件不是很可重用，并且它们缺乏可互换性。从以前的版本复制类组件代码是没有意义的。使用远离类组件并开始使用功能组件将是理想的选择。这是任何寻求正确方法的人的示例。
import React from 'react';
import Layout from './components/Layout/Layout';
function App() {
return (
<div className="App">
<Layout />
</div>
);
}
export default App;
功能组件布局：
import React from 'react';
import Aux from '../../hoc/Aux';
const layout = (props) => (
<Aux>
<div>TOOLBAR, SIDEDRAWER, BACKDROP</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;