如何将basic Javascript项目转换为React-Typescript兼容项目
我正在尝试将一个基本的TS应用程序转换为React Typscript应用程序。
我的html看起来像这样：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
</head>
<body>
<p>This is the entry point to my app</p>
</body>
</html>我用的是webpack，所以我的index.js是基础的：
import './index.css';
import './components/my-component';到目前为止，我的主要尝试是模仿creat-react-app并添加一个文件
import React from 'react';
const MyComponent: React.FunctionComponent = (): JSX.Element => {
return <div> Hello !!! </div>;
};
export default MyComponent;并更改index.html body部分，如下所示：
<body>
<div id="root"></div>
</body>并将index.ts更改为index.tsx，如下所示：
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './components/my-component';
ReactDOM.render(
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
document.querySelector('#root'),
);它可以正常编译，但会呈现一个空页面。我得到的错误是:专门针对<React.StrictMode>的TypeError: undefined is not an object (evaluating 'react_dom_1.default.render')。我正在使用"react": "^17.0.1"
我还看到，由于某种原因，它没有接收到我的组件
当我检查页面时，我可以看到以下源代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/chunks/app.js"></script></body>
</html>有什么想法吗？
回答 1
Stack Overflow用户
发布于 2021-01-17 09:08:53
巴别塔的ES模块版本和实际的ES模块规范( TypeScript更密切地遵循)并不总是一致的。对于没有默认导出的模块，包括React和ReactDOM，您需要这样导入它们：
import * as React from 'react'
import * as ReactDOM from 'react-dom'这将导入这些名称下的React和ReactDOM模块的所有导出，而不是假装它们有一个默认的导出。
在许多情况下，通常包括简单的函数组件，您也不需要指定返回类型，因为它很容易推断。
https://stackoverflow.com/questions/65756207
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号