简单的React组件无法渲染

Question

我创建了一个简单的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>

请问任何一点我们可能有什么问题。

Answer 1

JSX希望组件标签大写。否则，它将仅使用提供的标签创建一个DOM元素。参见HTML标签与React组件。

<map />编译为React.createElement("map", {});同时<Map />编译成React.createElement(Map, {});。

只要重命名map为Map，您就很好。