Je suis nouveau sur React. Je souhaite partager mes fichiers de composants avec vous. Le code est syntaxiquement correct et s'exécute très bien. Je veux juste savoir si c'est logiquement correct et l'utilisation correcte de concepts tels que les états.
Est-il correct de sauvegarder les coordonnées lng et lat de l'API GeoLocation dans l'état de MapContainer?
Est-ce correct l'utilisation correcte de la fonction ComponentDidMount ().
De quelles autres manières puis-je améliorer le code.
// MapContainer.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import Map from './Map'
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
center: {
lat: 0, lng: 0
}
}
this.getLocation = this.getLocation.bind(this);
this.showPosition = this.showPosition.bind(this);
}
getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
}
showPosition(position) {
this.setState({
center: {
lat: position.coords.latitude,
lng: position.coords.longitude
}
});
}
componentDidMount() {
this.getLocation();
}
render() {
return (
<div className="row">
<div className="col-md-9">
<Map center={this.state.center} />
</div>
<div className="col-md-3 d-sm-none d-md-block d-none d-sm-block">
<h1>Menu</h1>
</div>
</div>
);
}
}
export default MapContainer
// Map.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import GoogleMapReact from 'google-map-react';
function Map(props) {
const screenHeight = window.screen.height;
return (
<div style={{ height: screenHeight - 250 }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "123mykey" }}
center={props.center}
defaultZoom={props.zoom}
></GoogleMapReact>
</div>
);
}
Map.defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
export default Map
3 Réponses :
Ça me va. Il vous suffit d'importer 'bootstrap / dist / css / bootstrap.css'; dans votre fichier principal index.js.
Tout semble bon, vous faites bien
Est-il correct de sauvegarder les coordonnées lng et lat de l'API GeoLocation dans l'état de MapContainer?
Est-ce l'utilisation correcte de la fonction ComponentDidMount ()?
Ouais, pourquoi pas?
De quelles autres manières puis-je améliorer le code.
il y a quelques changements mineurs comme:
1- vous pouvez importer Component en haut et la définition de classe serait plus petite
2- c'est une bonne pratique d'utiliser une définition de composant de fonction de flèche comme celle-ci
export default (props) => {
const screenHeight = window.screen.height;
return (
<div style={{ height: screenHeight - 250 }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "AIzaSyCV1fQD2VC6HoNbuuSPkE0q_QZvDf117PY" }}
center={props.center}
defaultZoom={props.zoom}
></GoogleMapReact>
</div>
);
}
généralement vous utilisez react de la bonne manière, continuez
Cela ressemble bien à MapContainer (Exemple 2) mais je propose de séparer vos logiques basées sur les vues et les autres. Par exemple, la fonction getLocation n'est pas basée sur votre vue (ne dépendant pas du composant React ou de la modification de la vue), nous pouvons donc brancher cette fonction logique dans une fonction indépendante plus tard le code showPosition fonction va utiliser cette fonction.