Javascript 简单的 React 组件不渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29850247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple React component not rendering
提问by iJade
I have created a simple React component which displays another react component. But it doesn't render in browser :
我创建了一个简单的 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>
);
}
});
I'm expecting the helloto show up on the screen, but nothing shows up and when I inspect the element all I can see is
我期待hello出现在屏幕上，但没有任何显示，当我检查元素时，我只能看到
<map data-reactid=".0.0"></map>
Can any one point our what might be wrong.
任何人都可以指出我们可能有什么问题。
回答by Alexandre Kirszenberg
JSX expects component tags to be capitalized. Otherwise, it will just create a DOM element with the provided tag. See HTML Tags vs. React Components.
JSX 期望组件标签大写。否则，它只会使用提供的标签创建一个 DOM 元素。请参阅HTML 标签与 React 组件。
<map />compiles to React.createElement("map", {});while <Map />compiles to React.createElement(Map, {});.
<map />编译为React.createElement("map", {});while<Map />编译为React.createElement(Map, {});.
Just rename mapto Mapand you're good.
只需重命名map为Map，你就很好。
回答by Vinit Raj
Just make sure that variable which you declare for creating components starts with a uppercase:-Just Like this
只需确保您为创建组件声明的变量以大写开头：-就像这样
var Map = React.createClass({
//Your Code here
});
