왜 구성 요소가 반응에 표시되지 않습니까?

Question

난 .. 난이 모듈 https://github.com/PaulLeCam/react-leaflet https://www.npmjs.com/package/react-leaflet 의 기준을 반응에 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='&copy; <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')); 

Answer 1

당신은 당신의 render에 두 개의 리턴 문이 간다 내 코드입니다.

render은 구성 요소를 한 번만 반환해야합니다.

render(){ 
    const position = [this.state.lat, this.state.lng]; 
    return (

     <Map center={position} zoom={this.state.zoom}> 
     <label>cccc</label> 
     <TileLayer 
      attribution='&copy; <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 

)}