时间戳

首页 > 解决方案 > 将功能组件更改为类组件时，`npm init react-app` 导致 `'React' is not defined no-undef`

javascript - 将功能组件更改为类组件时，`npm init react-app` 导致 `'React' is not defined no-undef`

问题描述

我使用npm init react-app appname了它在其他文件中创建App.js. 在该文件中是一个函数组件：

function App() {
  return (
    <SomeJSX />
  );
}

我将函数组件编辑为类组件，如下所示：

class App extends React.Component{
  render() {
    return (
      <TheSameJSX />
    );
  }
}

现在，当我运行时npm start，我收到一个错误：

Failed to compile

src/App.js
  Line 4:19:  'React' is not defined  no-undef

Search for the keywords to learn more about each error.

我想我需要在某个地方添加一些设置，这些设置将自动包含 React，而无需import在每个文件的顶部显式地显示它。我该怎么做呢？为什么这个 npm 包默认不这样做？我对 javascript（以及 html 和 css）有所了解，并且读过一些关于 React 的内容，但我完全不知道 npm 或 webpack 是如何工作的。

提前致谢！

编辑：澄清一下，我知道如何用 javascript 导入东西。我可以轻松地添加import React from 'react';到文件中并使其工作。但是，我很难相信import向每个 javascript 文件添加语句是推荐的方法，而且我不明白为什么不设置此示例应用程序以避免必须这样做。我弄错了吗？我真的需要在同一个项目中一遍又一遍地手动导入相同的东西吗？我可以设置一个全局变量，React以便我可以在任何地方使用它吗？

标签： javascriptnode.jsreactjsnpmwebpack

解决方案

在您的默认函数组件中，您没有扩展任何类，只是编写一个简单的函数

function App() {
      return (
        <SomeJSX />
      );
    }

在类组件中，您实际上是通过 React 默认导出对象提供的类来扩展类Component，React.Component因此您必须从包中导入它

//only use one of these 
import * as React from "react"; 
import {Component} from "react"; // you can directly extend without writing `React.` with this import 
import React from "react"

所以你的代码是

import React from "react";

class App extends React.Component{
  render() {
    return (
      <TheSameJSX />
    );
  }
}

上述任何进口都应该优先于第一个和第二个进口。

推荐阅读