在我的react应用程序中导入一个新安装的模块

Question

我在反应性项目中安装了一个使用npm安装的模块。

npm install mdbreact --save

然后，我检查了nodemodules文件夹，以确保lib安装正确，是的。现在我正在尝试从新的lib导入一些组件，比如Input和Button，我正在尝试

import * as MDB from 'mdbreact';

import Input from 'mdbreact';

而我总是得到错误error TS2307: Cannot find module 'mdbreact'的帮助，如何解决这个问题？谢谢!

Answer 1

查看函数和变量是如何导出的，这样您就可以看到它们是如何导入的，这可能很有帮助。

我会进一步解释，但这里是文档：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

要从文件导出default变量/函数，可以使用export default短语。

var testObj = { 'hello' : 'world' };
export default testObj;

要从文件中导入default变量/函数，您可以这样做：

import testObj from './testFile';

要从文件导出标准变量/函数，可以使用标准的export关键字。

var testObj = { 'hello' : 'world' };
var testObj2 = { 'hello' : 'again' };
export { testObj, testObj2 }; 
// or if you just want to export testObj - notice the default keyword is missing
export testObj;

要从文件中导入标准变量/函数，必须将导入的变量/函数包装在大括号内。

TL;DR；

只有从文件中导出的默认变量/函数才能在没有大括号的情况下导入，其他任何东西都必须从大括号中导入。Input不是mdbreact的默认导出，这就是为什么必须像这样导入它的原因：

import { Input } from 'mdbreact';

*将从文件中导入所有可用的导出，这就是允许导入工作的原因。但是，您不希望在每个文件上导入mdbreact上的所有组件，使用mdbreact，否则项目会很快膨胀。