Question

我正在编写一个使用Geolocation API和用户输入位置的应用程序，并使用ReactJS构建。

该应用程序同时具有地图视图窗格和列表视图窗格;两者的容器（React术语中的“父”或“所有者”）是设置地理位置的容器。

所以，这样的东西就是容器：

var App = React.createClass({
/**
Internal callback used by Geolocation API
**/
setPosition: function(position){
    var lat = position.coords.latitude;
    var longitude = position.coords.longitude;
    this.setState({location: {lat:lat, lng:longitude}});        
},
getInitialState: function(){
    return {location: null, statusText: 'Finding you...'}
},
componentDidMount: function(){
/* First use current position on first load */
    if (!navigator.geolocation){
        this.setState({statusText: 'No Geolocation!'});
    }
    else{
        navigator.geolocation.getCurrentPosition(this.setPosition, this.errorPosition);
    }
},
render: function(){
    return(
            <SearchLocator biasLocation={this.state.location} 
                           statusProp={this.state.statusText} />
    )


}
)};

“SearchLocator”组件执行Google商家信息搜索。然后包含地图窗格和列表窗格：

var SearchLocator = React.createClass({
render: function(){
 return(<div>
    <GeoSuggest onSuggestSelect={this.handleSuggestion} />
    <MapAndListContainer locationProp={this.state.location} />
 </div>)
};
)};

最后，“MapAndListContainer”将位置prop传递到地图窗格和列表窗格。因此，正如您所看到的，位置属性采用看似

的对象的形式

{location: {lat: latValue, lng: lngValue}}

在setState中使用，也作为属性传递给子级。

问题：我只是让“初始状态”道具工作 - 也就是说，无论默认的初始状态是在app容器中（最顶层的父级）。但是当位置发生变化时，变化不会在整个孩子中传播。我应该使用： 1. componentShouldUpdate？ 2.物业上的“钥匙”？ 3. forceUpdate？还有别的我忽略了什么？

我是一个反应新手，会喜欢任何指针！

Answer 1

请尝试这是否可以解决您的问题：

<MapAndListContainer locationProp={this.props.biasLocation} />

将this.props.biasLocation而不是this.state.location传递给孩子MapAndListContainer。

使用动态属性更改来刷新组件

1 个答案: