简单的 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 Tags vs. React Components。

<map /> 编译为 React.createElement("map", {}); 而 <Map /> 编译为 React.createElement(Map, {});.

只需将 map 重命名为 Map 即可。

Answer 2

只需确保您为创建组件声明的变量以大写字母开头:-就像这样

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

});

简单的 React 组件不渲染

Simple React component not rendering

javascript

reactjs