在 React 中返回两个组件不起作用
我尝试了 Hello world 示例，通过从其他两个组件返回 Hello 和 world，但是在此代码中，我无法返回 Menubar 组件，而当我仅返回 Map 时，Map 组件可以工作。
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/Map'
import Menubar from './components/Menubar'
var App = React.createClass({
render: function(){
const location = {
lat: 33.980397,
lng: 71.427217
}
return(
<div style = {{height: '100%' , width:'100%'}}>
<div><Menubar /></div>
<div><Map center={location}/></div>
</div>
);
}
}
);
ReactDOM.render(<App />, document.getElementById('app'));
Menubar.js
import React from 'react';
var Menubar = React.createClass({
render: function(){
return (<div>Hello</div>);
}
});
export default Menubar
Map.js
import React from 'react';
import { GoogleMapLoader, GoogleMap } from 'react-google-maps';
var Map = React.createClass({
render: function(){
const mapContainer = <div style={{height: '100%', width:'100%'}}></div>
return(
<GoogleMapLoader
containerElement = { mapContainer }
googleMapElement = {
<GoogleMap
ref = {(map) => {
if (this.state.map != null)
return
this.setstate({
map: map
})
}}
defaultZoom={15}
defaultCenter={this.props.center}
options={{streetViewControl: false, mapTypeControl: false}}>
</GoogleMap>
}/>
)
}
}
);
export default Map
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>VizAp</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script>
</head>
<body>
<div id='app'></div>
<script src="index.js"></script>
</body>
</html>
它应该输出 Hello 和 Google map。尽管当我从 App.js 中删除 Menubar 标签时，Map 组件仍会返回。
这些是我从控制台获取的错误：
-
TypeError：undefined 不是对象（评估 'u["default"].createClass'） （已解决）
-
TypeError：null 不是对象（评估 '_this.state.map'） （已解决）
您需要在 Map.js 中设置初始状态，然后才能在渲染方法中引用 this.state。为此，您应该使用以下命令：
getInitialState: function() {
return {
map: SomeValueHere
}
},
render: ...
似乎缺少一个名为“map”的变量，如果 this.state.map 为空，则应将其分配给 this.state.map。
其次，我会从导出语句中删除“Default”。 这可能会导致此问题：TypeError：undefined 不是对象（评估“u["default"].createClass'）
这 详细说明了如何使用导出。每个模块只能有一个“Default”。但您可能有许多导出。
这里可能还有其他问题，这只是我注意到的第一件事。
- TypeError: undefined 不是对象（评估 'u["default"].createClass'）
此错误可通过从 index.html 中删除 react-bootstrap 脚本来解决，因为我已通过 npm 命令添加了 react-bootstrap 模块
- TypeError: null 不是对象（评估'_this.state.map'）
在 Map.js 中添加初始状态，然后声明 map: 0