简单的React组件无法呈现-Java 学习之路

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

1

JSX期望组件标签大写 . 否则，它将只使用提供的标记创建一个DOM元素 . 见HTML Tags vs. React Components .

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

只需将 map 重命名为 Map 就可以了 .

回复于 2024-04-25T15:42:57+08:00
70
只需确保您为创建组件声明的变量以大写开头： - 就像这样
```
var Map = React.createClass({
 //Your Code here

});
```
回复于 2024-04-25T15:42:57+08:00

简单的React组件无法呈现

2 回答

相关问题