React + TypeScript：“ React”是指UMD全局变量，但当前文件是模块。考虑添加导入。 （理由）

Question

我们在当前项目中使用React和TypeScript，遇到以下行为。

import React, { Component } from 'react';

我将上面的一行替换为下面的一行，因为它似乎仅使用Component导入。

import { Component } from 'react';

然后我被抛出错误

  

错误：“ React”是指UMD全局，但当前文件是一个模块。考虑添加导入。

我尝试在Stack和GitHub上查找它，发现很少的文章和讨论，但仍不清楚它为什么会发生。

会对React或Typescript抛出它感兴趣吗，为什么？不是修复它的方法。

UMD周围还有一些亮点，为什么在这里使用它？

Answer 1

您是否在文件中呈现任何jsx？如果是这样，您确实需要导入React，因为这些jsx标签会编译为对React.createElement()的调用。如果没有导入，对React的引用将尝试引用一个全局变量，这将导致该错误。

如果您使用的是eslint，我建议您使用eslint-plugin-react并启用规则react-in-jsx-scope，以解决这种情况。

Answer 2

JSX syntax is transpiled取决于compiler options的方式，ALTER TABLE `invoice` ENGINE = Innodb; ALTER TABLE `invoice` CHANGE COLUMN `patientid` `patientid` INT(12) UNSIGNED NOT NULL , CHANGE COLUMN `ammount` `ammount` DECIMAL(14,2) NOT NULL , CHANGE COLUMN `discount` `discount` DECIMAL(3,2) NULL DEFAULT '0' , ADD INDEX `fk_invoice_patient_idx` (`patientid` ASC); ALTER TABLE `invoice` ADD CONSTRAINT `fk_invoice_patient` FOREIGN KEY (`patientid`) REFERENCES `test`.`patient` (`patientid`) ON DELETE RESTRICT ON UPDATE CASCADE; 选项默认为jsxFactory。这意味着React.createComponent将被转换为<p/>，并且React.createComponent('p')应该存在于模块范围内。

如果没有React导入，则预计应该存在React全局变量。