獲取組件以使用動態屬性更改進行刷新

我正在編寫一個應用程序，該應用程序使用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」部分做了谷歌搜索的地方。而在又包含地圖窗格和列表窗格：

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

最後，「MapAndListContainer」經過定位託到地圖窗格和列表窗格。所以，你可以看到，在一個對象的形式，看起來像

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

中的setState使用以及作爲屬性給孩子們傳遞位置屬性。

問題：我只得到「初始狀態」道具的工作 - 也就是說，無論默認初始狀態是在應用程序容器（最頂層的父級）中。但是當位置發生變化時，變化不會傳播到整個孩子身上。我應該使用： 1. componentShouldUpdate？ 2.屬性上的「鍵」？ 3. forceUpdate？ 4.我忽略的其他東西？

我是React新手，會喜歡任何和所有的指針！

來源

2015-12-26 Nonystack

你不應該需要做這4件事情中的任何一件。我希望你的代碼在某處存在一些問題。你似乎在SearchLocator元素上設置了很多道具，而沒有真正使用它。您是否還嘗試過使用反應開發者工具調試每個元素的狀態？你能告訴我在應用程序開始運行後每個元素的狀態/道具是什麼嗎？ – Miguel

@Miguel：首先，這是一個指示性要點：https://gist.github.com/nonystack/f2587f6a834d12ac39d4 SearchLocator上的道具設置由SearchLocator的子項使用，即「Google地方」建議文本區域和實際地圖。這一切都是由經緯度觸發的。在應用程序開始運行後，立即默認的lat和lng是虛擬的，因爲傳遞null道具是一個問題。但稍後，該應用會反映地理位置API更新。孩子們沒有。 – Nonystack

請嘗試，如果這能解決你的問題：

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

通this.props.biasLocation，而不是this.state.location孩子MapAndListContainer。

來源

2015-12-28 09:00:11 Siu

這裏的問題是SearchLocator必須保持其位置的狀態，並且任何傳遞給SearchLocator的子項的道具必須反映狀態的變化。這是一個很好的猜測，但它不能解決我的問題。 – Nonystack

獲取組件以使用動態屬性更改進行刷新

回答

相關問題