不渲染的简单 React 组件

IT技术 javascript reactjs
2021-05-21 04:16:28

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

任何人都可以指出我们可能有什么问题。

2个回答

JSX 期望组件标签大写。否则,它只会使用提供的标签创建一个 DOM 元素。请参阅HTML 标签与 React 组件

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

只需重命名mapMap,你就很好。

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

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

});