Ich plane, diese Komponenten zu teilen und in drei verschiedene Komponenten zu trennen

Question

• Ich bin neu in js.
• Ich habe versucht, es5 zu es6 Klassen zu ändern.
• in meinem ES5 Geige der Registerkarte Inhalt feine
• in meinem es6 arbeitet Geige des Registerkarte Inhalt in
• aber im Moment plane ich diese Komponenten zu teilen und trennen sich in drei verschiedene Komponenten
• und ich habe importiert funktioniert eine Datei.
• aber ich bin immer die folgenden drei Fehler
• kann mich euch sagen, wie es zu beheben
• unter meinem Code bereitstellt.
• in Geige nicht sicher, wie ich meine Dateien getrennt teilen.

Registerkarte Inhalt mit es6 zeigt

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `first-time-tab`. 

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `first-time-tab`. 

invariant.js:39 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `first-time-tab`.(…) 



import React from 'react'; 
import Tabs from './sports-content'; 
import Pane from './players-content'; 

Answer 1

schwer zu folgen, was Sie fragen, aber diese Warnungen bedeuten, dass Sie versucht haben, eine Komponente aus einer Datei React importieren, die keine Komponente nicht exportieren oder Exporte es als eine benannte Komponente statt default:

Zwei gemeinsame Wege, in ES6 exportieren und wie sie importieren:

export default class Tabs extends Component { // logic } 

zu importieren:

import Tabs from 'path/to/file' 

Der zweite Weg ist mit einem Export genannt, wahrscheinlich, was Sie taten, was den Fehler verursacht:

export class Tabs extends Component { // logic } 

importieren An:

import { Tabs } from 'path/to/file' 

Beachten Sie, dass in der Standardmäßig sind beim Importieren keine Curlies erforderlich, und Sie können den gewünschten Namen eingeben. Der Nachteil ist, dass Sie nur einen Standard-Export in einer Datei haben können. Alle anderen sind weggelassen.

Im zweiten Fall müssen Sie es mit Curlies importieren und es muss den gleichen Namen wie in Ihrer Datei deklariert haben. Der Vorteil ist, dass Sie mehrere benannte Exporte in einer Datei haben können.