Componente Simple React non rendering

Question

Ho creato un componente React semplice che visualizza un altro componente di reazione. Ma non rende in del 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> 
    ); 
    } 
}); 

mi aspetto il hello di mostrare sullo schermo, ma nulla si presenta e quando ho ispezionare l'elemento di tutto quello che posso vedere è

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

Qualcuno può indicare ciò che potrebbe essere sbagliato.

Answer 1

JSX prevede che i tag del componente siano in maiuscolo. Altrimenti, creerà solo un elemento DOM con il tag fornito. Vedi HTML Tags vs. React Components.

<map /> compila a React.createElement("map", {}); mentre <Map /> compila a React.createElement(Map, {});.

Basta rinominare map a Map e sei a posto.

Answer 2

Basta fare in modo che variabile che si dichiara per la creazione di componenti inizia con una maiuscola: -Basta Ti piace questa

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

});