在反应中返回两个组件不起作用答案

【问题标题】：returning two components in react aren't working在反应中返回两个组件不起作用
【发布时间】：2016-11-01 17:49:23
【问题描述】：

我通过从其他两个有效的组件返回 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

地图.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 中删除 Menubar 标记时 Map 组件正在返回。

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

TypeError：未定义不是对象（评估 'u["default"].createClass') （已解决）
TypeError: null 不是对象（评估 '_this.state.map'）（已解决）

【问题讨论】：

标签： javascript google-maps reactjs components

【解决方案1】：

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

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

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

其次，我会从您的导出语句中删除“默认”。这可能会导致：TypeError: undefined is not an object (evalating 'u["default"].createClass')

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

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

【讨论】：

谢谢贾斯汀。 map的初始值应该是多少？
我只是放了 map: 0 ，现在一个错误消失了。这个错误依然存在 TypeError: undefined is not an object (evalating 'u["default"].createClass')
尝试从您的出口声明中删除“默认”。
你在使用 webpack / babel 吗？
这个错误也可以通过从index.html中删除react-bootstrap脚本来解决，我不为什么添加它会导致这个错误

【解决方案2】：

TypeError：未定义不是对象（评估 'u["default"].createClass')

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

TypeError：null 不是对象（正在评估“_this.state.map”）

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

【讨论】：