仅导入反应中的特定组件

Question

我正在使用 React 开发 Web 项目。
我怎样才能从库中只导入 3 个组件。
我用过：

import Line, Bar, Doughnut from 'react-chartjs-2';

报错。

import Line from 'react-chartjs-2';
import Bar from 'react-chartjs-2';
import Doughnut from 'react-chartjs-2';

使所有 Line、Bar 和 Donut 元素充当 Donut 元素。

正在使用

import {Line, Bar, Doughnut} from 'react-chartjs-2';

加载整个库，这是我不想要的。

注意：我在多个文件中使用该导入。

Answer 1

这是关于作者如何构建、打包、导出 components/modules/classes。

看看 gulpfile.js and /lib of react-chartjs-2, you will see each class wasn't exported as a module (CommonJS)，所以你只能导入 class Doughnut（或其他 classes），例如这个：

import { Doughnut } from 'react-chartjs-2'

除非你把代码分离出来，自己重新构建。

如果您对为什么 react-bootstrap 可以做到这一点感兴趣，请查看它的 webpack config, build tools, and code structure。我们可以从中获得更多信息：

react-chartjs-2的文件结构
react-bootstrap的文件结构

仅导入反应中的特定组件

Import only specific components in react

reactjs

babeljs

react-chartjs