Cant eine Klasse von Importdatei verwenden

Question

Ich versuche, ein Projekt in mehrere Dateien aufgeteilt und wenn ich versuche, eine Datei zu importieren Ich bekomme diese Warnungen/Fehler warning.js:36Warning: 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 Menü . warning.js:36Warning: 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 Menü . invariant.js:38 Uncaught 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 Menü .(…)

Ich habe versucht, dieses Problem zu googeln und ich sah viele Beiträge wie diese, aber ich konnte dieses Problem nicht lösen. hier ist die Menu.jsx

import React, { Component } from 'react' 
import { render } from 'react-dom' 
import Link from 'react-router' 

export default class Menu extends Component { 
    render() { 
     return (
      <ul> 
       <li><Link to="test">Link1</Link></li> 
       <li><Link to="test2">Link2</Link></li> 
      </ul> 
     ) 
    }; 
} 

und hier die app.jsx

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link, browserHistory } from 'react-router' 
import Menu from './Menu' 

const Home = React.createClass({ 
    render() { 
    return (
     <div> 
     <div className="headerNav"> 
      <Menu /> 
     </div> 
     <h1>Welcome to the Home Page</h1> 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

const RestOf = React.createClass({ 
    render: function() { 
    return (<h1>Will it get all the others ?</h1>); 
    } 
}); 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={Home} > 
     <Route path="*" component={RestOf} /> 
    </Route> 
    </Router> 
), document.getElementById('root')); 

gut, habe ich fast alles habe ich versucht, von der Suche gefunden, nicht sicher, was ich hier TBH fehlt .. aber Ich bin wirklich verwirrt von diesen Fehlern. S. Ich bin wirklich neu bei React.

etwas, das ich bemerkt habe, wenn ich die Menü-Klasse in der app.jsx als und definiert es als die anderen Klassen, wird es gut funktionieren.

edit: Ich benutze Webpack so kompilieren Sie die react-Dateien.

danke!

Answer 1

Für mich sieht das Problem ist mit dem Link Import von react-router in der Menu.jsx Datei. Es sollte so aussehen:

import { Link } from 'react-router' 

export default class Menu extends Component { 

Bitte beachten Sie {}. React Router exportiert ein Objekt mit einem Link-Schlüssel.

In der zweiten Datei Ihre Import sieht gut aus:

import { Router, Route, Link, browserHistory } from 'react-router' 

Das erklärt, warum dies funktioniert, wenn Sie die Menu-Klasse dort eingefügt.

Ein Hinweis hier ist die Fehlermeldung:

Check the render method of Menu. 

So können Sie sicher sein, dass die Menu-Klasse geladen wird, und der Fehler in Ihrer Funktion zu machen. Wenn die Menüdatei nicht gefunden wurde, erhalten Sie die Meldung, dass das Menü nicht definiert ist oder etwas Ähnliches.