Question

我正在尝试使用create-react-app命令创建react应用，并生成App.js文件作为函数（不带类的ES5语法）而不是类（以下代码中的示例）：

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;

如何强制create-react-app生成类？

Answer 1

这是生成新项目时的默认文件。

Here's指向复制文件的链接。我相信CRA的较早版本确实具有类，但是就强制其生成带有类的文件而言，目前尚未设置为这样做。

Answer 2

要回答您的问题，您不能强制create-react-app生成类，但是可以使用该软件包的旧版本。模板从https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/App.js复制到新创建的项目中，而不生成。

要添加的快速项，该类在以前的版本中作为箭头函数生成。他们将更改返回到您所看到的内容，以使Create-React-App与React文档github.com/facebook/create-react-app/pull/6655

保持一致

Answer 3

是的，现在在功能组件中反应越来越好，我们不需要更多的类组件。您可以使用Hooks创建状态等等。

看看文档：

https://reactjs.org/docs/hooks-overview.html

Answer 4

不要打扰自己，只需手动进行更改。

var result = string.Join(",", str.Split('|')
                .Select((x,index)
                    =>new 
                     {
                       Value=x,
                       Index=index, // use index+1 if you need 1-based index
                       Contains=x.Contains("hello")
                      })
                .Where(x=>x.Contains)
                .Select(x=>x.Index));

Answer 5

您可以轻松地将其更改为这样的类：

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;

Answer 6

是的，默认情况下，您实际上可以使用create-react-app仍然生成基于类的组件，但是您必须指定脚本的先前版本（它们将其更改为3.0版中的功能组件-参见此处：{{3 }}）

这应该可行：

npx create-react-app my-app --scripts-version react-scripts@^2 .

create-react-app生成函数而不是App.js中的类

6 个答案: