Компонент Simple React не отображается

Я создал простой компонент React, который отображает другой компонент реакции. Но он не отображается в браузере:

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>
      );
    }
});

Я ожидаю появления hello на экране, но ничего не появляется, и когда я проверяю элемент, все, что я вижу,

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

Может ли кто-нибудь указать, что может быть неправильным.

Ответ 1

JSX ожидает, что теги компонентов будут капитализированы. В противном случае он просто создаст элемент DOM с предоставленным тегом. См. HTML-теги против компонентов React..

<map /> компилируется в React.createElement("map", {});, а <map /> компилируется в React.createElement(Map, {});.

Просто переименуйте map в map, и вы хорошо.

Ответ 2

Просто убедитесь, что переменная, которую вы объявляете для создания компонентов, начинается с прописной буквы: -Just Как этот

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

});