text #react #componentDidMount
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text #react #componentDidMount相关的知识,希望对你有一定的参考价值。
import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';
import SearchBar from './SearchBar';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lat: null, errMessage: '', long: null };
}
componentDidMount() {
window.navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({ lat: position.coords.latitude, long: position.coords.longitude });
},
(err) => {
console.log(err);
this.setState({ errMessage: err.message })
}
)
}
render() {
if (this.state.errMessage && !this.state.lat) {
return (
<div>
error : {this.state.errMessage}
</div>
)
}
else if (!this.state.errMessage && this.state.lat) {
return (
<div>Long : {this.state.long}, Lat: {this.state.lat} </div>
)
}
return (
<div className="ui active inline loader">Loading position ..</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
以上是关于text #react #componentDidMount的主要内容,如果未能解决你的问题,请参考以下文章
react 实现滚动条一直位于容器的底部
text #react #boilerplate #express #react #node #mongodb
注册时的 ServiceWorker MIME 类型错误('text/html')(React)
[React] Render Text Only Components in React 16
初学react
text React Weather Review链接