簡單React組件不呈現

我創建了一個簡單的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>

任何人都可以指出我們可能是錯的。

來源

2015-04-24 iJade

JSX希望組件標籤大寫。否則，它只會使用提供的標籤創建一個DOM元素。見HTML Tags vs. React Components。

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

剛剛重命名map到Map，你很好。

來源

2015-04-24 14:36:40

清楚，給出了另一個錯誤'遺漏的類型錯誤：無法讀取屬性「toUpperCase」未定義ReactDefaultInjection.js的：53' – iJade

確保在您的App :: render方法的上下文中正確定義了Map。另外，請注意，在ES6中，「Map」是一個標準的內置對象，因此您可能想要將組件重命名爲其他內容。 –

好的..我將它重命名爲「MyMap」，但仍然是相同的錯誤。 – iJade

只要確保你申報創建組件變量開始以大寫： - 只是像這樣

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

});

來源

2017-03-17 10:17:49

簡單React組件不呈現

回答

相關問題