为什么组件不显示在反应中?
why component is not display in react?
我正在尝试在 React 中使用 leaflet
..我参考了这个模块
https://github.com/PaulLeCam/react-leaflet
https://www.npmjs.com/package/react-leaflet
但它不显示地图,为什么?
这是我的代码
https://plnkr.co/edit/pTpPxhEFqouMrLTrKUFq?p=preview
// 代码在此处
const { Map, TileLayer, Marker, Popup } = ReactLeaflet;
class A extends React.Component{
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
render(){
return (
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<label>cccc</label>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
)
}
}
ReactDOM.render(<A/>,document.getElementById('example'));
您的 render
中有两个 return 语句。
render
应该只 return 组件一次。
render(){
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<label>cccc</label>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
}
多项:
{this.state.items.map(item => (
<Marker position={[item.lat, item.lng]}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker
)}
我正在尝试在 React 中使用 leaflet
..我参考了这个模块
https://github.com/PaulLeCam/react-leaflet
https://www.npmjs.com/package/react-leaflet
但它不显示地图,为什么?
这是我的代码 https://plnkr.co/edit/pTpPxhEFqouMrLTrKUFq?p=preview
// 代码在此处
const { Map, TileLayer, Marker, Popup } = ReactLeaflet;
class A extends React.Component{
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
};
}
render(){
return (
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<label>cccc</label>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
)
}
}
ReactDOM.render(<A/>,document.getElementById('example'));
您的 render
中有两个 return 语句。
render
应该只 return 组件一次。
render(){
const position = [this.state.lat, this.state.lng];
return (
<Map center={position} zoom={this.state.zoom}>
<label>cccc</label>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
}
多项:
{this.state.items.map(item => (
<Marker position={[item.lat, item.lng]}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker
)}