Question

我尝试了Hello world世界示例，其中两个其他组件返回Hello和world但是在这段代码中我不能返回菜单组件而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地图。虽然我从App.js中删除了菜单标记时返回了Map组件。

这些是我从控制台获得的错误：

TypeError：undefined不是对象（评估＆＃39;你[＆＃34;默认＆＃34;]。createClass＆＃39;）（已解决）
TypeError：null不是对象（评估＆＃39; _this.state.map＆＃39;）（已解决）

Answer 1

在渲染方法中引用this.state之前，需要在Map.js中设置初始状态。为此，您应该使用以下内容：

getInitialState: function() {
    return {
        map: SomeValueHere
    }
},
render: ...

看起来有一个名为“map”的缺失变量，如果this.state.map为null，则应将其分配给this.state.map。

其次，我会从导出语句中删除“默认”。这可能导致这种情况：TypeError：undefined不是对象（评估'u [“default”]。createClass'）

This详细解释了如何使用导出。每个模块只有一个“默认”。但是你可能有很多出口。

这里可能还有其他问题，这只是我注意到的第一件事。

Answer 2

TypeError：undefined不是对象（评估 'U [ “默认”]。createClass'）

通过从index.html删除react-bootstrap脚本来解决此错误，因为我已经通过npm命令添加了react-bootstrap模块

TypeError：null不是对象（评估'_this.state.map'）

在Map.js中添加初始状态，然后声明map：0

在反应中返回两个组件是不起作用的

2 个答案: