簡單的React組件無法呈現

Question

我創建了一個簡單的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標記與反應組件 。

<map />編譯為React.createElement("map", {}); 而<Map />編譯為React.createElement(Map, {}); 。

只需將map重命名為Map ，就可以了。

Answer 2

只需確保您為創建組件聲明的變量以大寫開頭： - 就像這樣

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

});