本文共 540 字，大约阅读时间需要 1 分钟。

我们初次使用TSX开发React项目时，可能会对模块引入方式感到困惑。

在TSX中引入React确实与传统的JavaScript方式有所不同。TSX需要我们像这样引入React：

import * as React from 'react';

而在传统的JavaScript项目中，引入React则可以这样写：

import React, { Component, useState } from 'react';

从上面的对比可以看出，使用TSX的引入方式相对不够方便。因为TSX的 JSX 语法依赖于React，而每个 React 组件都需要显式地引入 React。

如果想像传统的 JavaScript 写法在 TSX 中使用模块引入，确实需要一些配置。具体来说，我们需要在 tsconfig.json 的“compilerOptions”中添加以下选项：

{    "compilerOptions": {      "allowSyntheticDefaultImports": true    }  }

这样配置后，我们就可以像在 JavaScript 中一样引入模块了。这种方法既简洁又高效，适用于所有 React 组件，包括类式组件和使用 hooks 的函数组件。

转载地址：http://suuh.baihongyu.com/