Importieren Sie nur bestimmte Komponenten in reagieren

Question

Ich arbeite an einem Webprojekt mit reagieren.
Wie kann ich nur 3 Komponenten aus einer Bibliothek importieren.
Ich habe verwendet:

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

einen Fehler gibt.

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

Alle Line-, Bar- und Donut-Elemente fungieren als Donut-Elemente.

Mit

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

lädt die ganze Bibliothek, die etwas, das ich nicht will.

HINWEIS: Ich verwende diesen Import in mehreren Dateien.

Answer 1

Es geht darum, wie der Autor die Komponenten/Module/Klassen erstellt, verpackt und exportiert.

Werfen Sie einen Blick auf die gulpfile.js und /lib von reagieren-chartjs-2, werden Sie jede Klasse sehen nicht als Modul (CommonJS) exportiert wurde, so dass nur Sie Donut die Klasse importieren können (oder anderen Klassen) wie folgt aus:

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

es sei denn, Sie den Code und bauen sie sich trennen.

Wenn Sie interessiert sind, warum react-bootstrap das kann, überprüfen Sie webpack config, build tools und code structure. Und mehr können wir von bekommen:

• Dateistruktur von reagieren-chartjs-2 's Verteilung

  

• Dateistruktur von reagieren-Bootstrap' s Verteilung