typescript+reactjs+requirejs：如何将 react-dom 导入 typescript

Posted 2023-02-24

【中文标题】typescript+reactjs+requirejs：如何将 react-dom 导入 typescript

【英文标题】：typescript+reactjs+ requirejs: how to import react-dom into typescript

【发布时间】：2016-05-04 10:00:15

【问题描述】：

我正在使用 typescript + react.js。在 Visual Studio (2015) 中，在项目属性 --> Typescript 构建 --> 模块系统中：我已经检查了 AMD，所以我使用 requirejs 来导入我的模块。

我有一个 main.txs 文件，我在其中将我的主要组件渲染到 body 标记中，例如：

React.render(<MyMainComponent />, my_body_element);

现在，在我的文件之上，我已经做出了正确的导入声明：

import react = require('react');
import reactdom = require('react-dom'); 
import some_library = require('./some_library')

（sos：我正在使用DefiniteTyped -tsd- 来导入类型定义）

构建后（在 Visual Studio 中），会生成一个 main.js 文件，其中发出的 javascript 如下：

define(["require", "exports", 'react', './some_library'], function (require, exports, react, some_library)  

..... code goes here .....

您可以看到 react-dom 的 require 语句尚未生成。为什么发出的 main.js 文件中没有生成 react-dom 的 require 语句？

结果是我无法在我的代码中使用 ReactDom。

有没有人能够使用 react、react-dom、requirejs 和 typescript？ （大概是在视觉工作室环境中？）

如何告诉 Visual Studio 为 react-dom 发出 require 语句？

【参考方案1】：

如果这是你写的代码

React.render(<MyMainComponent />, my_body_element);

那么你没有使用reactdom，所以编译器认为删除导入是安全的。

你可能想写

reactdom.render(<MyMainComponent />, my_body_element);

如果您要导入 react-dom 但不使用它（为什么？），请使用 amd-dependency 标记将其显式添加到导入列表中。

【讨论】：

感谢您的回答。但是每次我使用 ReactDom 时，我都会收到一个异常：cannot use function render of undefined... --> 意思是 ReactDom 是未定义的（因为它还没有被导入）。我一定会看看这个“amd-dependency”标签。第一次听说。

这意味着导入在运行时失败。你检查过你的浏览器控制台是否有来自 requirejs 的 404 消息或错误？

不幸的是，我的浏览器没有 404 消息...我真的迷路了...我想到了 2 件事：要么我的解决方案已损坏（我能够运行一个非常简单的只有 reat.js、react-dom.js 和 main.txs 文件的项目。react-dom 已正确加载。但我的项目非常庞大，我无法从头开始）另一种可能是我正在制作一个我在 require.js 中声明 react-dom 依赖于 react.js 的方式错误