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链接