Einfache React-Komponente, die nicht rendert

Question

Ich habe eine einfache React-Komponente erstellt, die eine andere Reaktionskomponente anzeigt. Aber es macht nicht in Browser:

class Home extends React.Component { 
    render() { 
    return (
     <div> 
     <map/> 
     </div> 
    ); 
    } 
} 

var map = React.createClass({ 
    render: function() { 
     return (
      <div id="map-canvas"> 
      <span>hello</span> 
      </div> 
    ); 
    } 
}); 

Ich erwarte die hello auf dem Bildschirm zu zeigen, aber nichts auftaucht und wenn ich das Element alle inspizieren kann ich sehen, ist

<map data-reactid=".0.0"></map> 

Kann irgendjemand auf unser Problem hinweisen?

Answer 1

JSX erwartet, dass Komponenten-Tags groß geschrieben werden. Andernfalls wird nur ein DOM-Element mit dem angegebenen Tag erstellt. Siehe HTML Tags vs. React Components.

<map /> kompiliert zu React.createElement("map", {}); während <Map /> kompiliert zu React.createElement(Map, {});.

Benennen Sie einfach map zu Map und Sie sind gut.

Answer 2

nur sicherstellen, dass Variable, die Sie erklären für Komponenten beginnt mit einem Großbuchstaben zu erstellen: -Nur Gefällt Ihnen dieses

var Map = React.createClass({ 
//Your Code here 

});