Question

我有以下GoogleMaps React组件：

var GoogleMaps = React.createClass({
    getDefaultProps: function () {
        return {
            initialZoom: 6,
            mapCenterLat: 53.5333,
            mapCenterLng: -113.4073126
        };
    },
    componentDidMount: function (rootNode) {
        var mapOptions = {
            center: this.mapCenterLatLng(),
            zoom: this.props.initialZoom
        },
        map = new google.maps.Map(this.getDOMNode(), mapOptions);
        var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map});
        this.setState({map: map});
    },
    mapCenterLatLng: function () {
        var props = this.props;

        return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng);
    },
    render: function () {

        return (
            <div className='map-gic'></div>
        );
    }
});

然后通过以下声明使用它：

var myPage = React.createClass({
  render: function() {
    return (
      <div>
        <GoogleMaps mlat="55.0000" mlong="-113.0000" />
      </div>
    )
  }
});

如何访问传递的值（mlat和mlong），以便在渲染的地图上标记位置？目前，getDefaultProps函数中的值是地图上标记的值。

重新提问： 如何使用我通过组件渲染的值替换mapCenterLat函数中变量mapCenterLng和getDefaultProps的值？

当我通过添加render这样的GoogleMaps来检查console.log组件的render: function () { console.log(this.props.mlat); console.log(this.props.mlong); return ( <div className='map-gic'></div> ) }函数中传递的值时：

undefined
undefined
undefined
undefined
55.0000
113.000

这是在浏览器控制台中注册的内容：

{{1}}

此应用程序的源代码位于this GitHub repo。

Answer 1

Here是一个基本的工作示例。

我不确定你的代码是做错了什么，因为它与工作或演示问题所需要的完全不符。

我没有尝试进一步清理代码。如果props更改（因为componentDidMount仅执行一次），并且当React在控件上执行Map时未正确删除unmount，则它不起作用。

var GoogleMap = React.createClass({  
    getDefaultProps: function () {
        return {
            initialZoom: 8,
            mapCenterLat: 41.8,    /* Chicago by default */
            mapCenterLng: -87.6,
        };
    },
    componentDidMount: function (rootNode) {
        var mapOptions = {
            center: this.mapCenterLatLng(),
            zoom: this.props.initialZoom
        };
        var map = new google.maps.Map(this.getDOMNode(), mapOptions);
        var marker = new google.maps.Marker({position: this.mapCenterLatLng(), map: map});
        this.setState({map: map});
    },
    mapCenterLatLng: function () {
        var props = this.props;
        return new google.maps.LatLng(
               props.mapCenterLat, props.mapCenterLng);
    },
    render: function () {
        return (
            <div className="gmap"></div>
        );
    }
});
// Bay area override
React.renderComponent(
    <GoogleMap mapCenterLat='37' mapCenterLng='-122' />, 
    document.body);

ReactJS将值传递给Google Map组件

1 个答案: