安装react-tagsinput遇到的坑

react-tagsinput是用于标签输入的一个简单易用的高可定制React组件（npm地址：https://www.npmjs.com/package/react-tagsinput），由于对npm的原理还不是很熟，故闹出了一些笑话。

1. 安装使用： 命令：npm install react-tagsinput --save
2. 在项目中导入：语句：import TagsInput from 'react-tagsinput'，发现并不能使用（项目构建自身的问题，一般情况下是可以正常使用的），如图：

3. 解决方法：这里可以通过如下方法解决：import * as TagsInput from 'react-tagsinput'，因为这个库没有导出default，所以引用TagsInput是undefined ，导出没有default，require进来是没有default的。去查看这个组件库的代码，如下：

发现有导出default啊！那怎么会出错？我看的代码目录如下（我打开的是 src下index.js）：

其实是没有导出的！其实应该看 react-tagsinput.js文件！！如图：

**module.exports是TagsInput这个组件，TagsInput并没有指定default！！！**所以项目require进来也是没有default的，所以之前的调用方法会报错。这里就是package.json没弄清楚（不懂的话，参考：https://docs.npmjs.com/files/package.json）闹出笑话的地方：src里面的文件是编译前的，require进来的是react-tagsinput.js（packa.json里main字段对应的文件才是我们require进来的）

4. 最后提一点组件样式设置相关：一般情况下，使用该组件自带的样式可以在项目中添加如下语句：import 'react-tagsinput/react-tagsinput.css'，不过在我自己的项目中使用自带的样式会有问题，如下：

并且自带的样式风格一般与自己项目也会有出入，所以要自己重新更改样式。react-tagsinput的样式要更改的话都是有对应的属性的，可以看官方接口说明（https://www.npmjs.com/package/react-tagsinput#props）。我自己是通过CSS module来实现的，直接将 **react-tagsinput.css文件 **里面的代码拷到一个css 模块文件中，并将其改为符合自己项目风格的样式，然后使用组件时将修改后的class传入对应的样式接口属性就可以啦~