在反應中使用道具

Question

我使用API​​中的數據構建應用程序，我想在應用程序中包含用戶的緯度和經度。

我的應用程序在兩個文件：app.js和main.js

在app.js我呈現這樣的組件：

render(<Main source="https://api.darksky.net/forecast/apikey/latitude,longitude?units=auto"/>, document.getElementById('app')); 

的經度和緯度組件的源目前硬編碼的，我想使這些動態。

在我main.js的組件使用這樣的API：

componentDidMount() { 
this.serverRequest = $.get(this.props.source, function (result) { 
    this.setState({ 
    daily: result.daily.data, 
    hourly: result.hourly.data 
    }); 
}.bind(this)); 
} 

林能夠獲取使用HTML的地理定位用戶的位置 - 這我想我應該在構造或componentWillMount商店，但我需要一種方法發送變量到app.js文件中的主要組件的源文件 - 我想我應該使用像道具一樣的來源，但我不知道如何

Answer 1

這可能是一個很好的方法來傳遞經度和緯度到你的組件作爲道具，並在組件中組裝URL：

render(<Main longitude={longitude} latitude={latitude} />, document.getElementById('app')); 

---

componentDidMount() { 
    const url = `https://api.darksky.net/forecast/apikey/${this.props.latitude},${this.props.longitude}?units=auto`; 
    this.serverRequest = $.get(url, function (result) { 
     this.setState({ 
      daily: result.daily.data, 
      hourly: result.hourly.data 
     }); 
    }.bind(this)); 
} 

Answer 2

由於HTML地理位置是異步的render()調用可能進入的地理定位成功回調：

if (navigator.geolocation){ 

    function success(position) { 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    ReactDOM.render(
     <Main lat={ latitude } lon={ longitude } />, document.getElementById('container') 
    ); 
    }; 

    function error() { 
    console.log('geolocation error') 
    }; 


    navigator.geolocation.getCurrentPosition(success, error); 

} 

https://jsfiddle.net/69z2wepo/62204/

一個更高級的例子是高階執行地理定位並將座標傳遞給包裝組件的組件。然後裹組件應檢查座標componentWillReceiveProps方法和做AJAX請求一旦道具都非空：

var GeoComponent = Component => React.createClass({ 
    getInitialState(){ 
     return { 
      lat : null, 
      lon : null 
     } 
    }, 

    componentDidMount(){ 
     navigator.geolocation.getCurrentPosition(this.setCoordinates, err => console.log(err)); 
    }, 

    setCoordinates(position){ 
     this.setState({ 
      lat : position.coords.latitude, 
      lon : position.coords.longitude 
     }) 
    }, 

    render(){ 
     return <Component lat={ this.state.lat } lon={ this.state.lon } { ...this.props } />; 
    } 
}); 

var Main = React.createClass({ 
    componentWillReceiveProps(nextProps){ 
     if(nextProps.lat && nextProps.lon){ 
      console.log('received coords!'); 
      /* 
       this.serverRequest = $.get(this.props.source, function (result) { 
       this.setState({ 
       daily: result.daily.data, 
       hourly: result.hourly.data 
       }); 
       }.bind(this)); 
      */ 
     } 
    }, 

    render(){ 
     return <div>Latitude: { this.props.lat }, Longitude: { this.props.lon }</div>; 
    } 

}); 


ReactDOM.render(
    React.createElement(GeoComponent(Main)), 
    document.getElementById('container') 
); 

https://jsfiddle.net/69z2wepo/62205/

Answer 3

如果我沒有記錯的話，那麼你想要達到的目標是有權訪問app.js中的地理位置信息，不是嗎？那麼你爲什麼不在app.js內部獲取用戶地理位置並將其傳遞到Main？該代碼會是這樣的

app.js

let geo = null; 
navigator.geolocation.getCurrentPosition(function(pos) { 
    geo = pos; 

    render(<Main source={`https://api.darksky.net/forecast/apikey/${geo.coords.latitude},${geo.coords.longitude}?units=auto`}/>, document.getElementById('app')); 

    // Below use user's geolocation info as you wish 
}); 

---

或者，如果你想獲得用戶的地理位置信息之前，使一些佔位符，那麼你可以讓主要成分做大部分的事情，傳遞迴調主更新地理位置信息，以app.js

app.js

render(<Main updateGeolocation={geo => { /* do stuffs with geo */ }} />, document.getElementById('app')); 

個main.js

componentDidMount() { 
navigator.geolocation.getCurrentPosition(function(pos) { 
    this.serverRequest = $.get(`https://api.darksky.net/forecast/apikey/${pos.coords.latitude},${pos.coords.longitude}?units=auto`, function (result) { 
    this.setState({ 
    daily: result.daily.data, 
    hourly: result.hourly.data 
    }); 
    }.bind(this)); 

    this.props.updateGeolocation(pos); 
} 
}