반응 전단에 반응 전단을 그려서 렌더링 됨 반응 전단에 그려진 층을 그려 넣으십시오.

Question

react-leaflet-draw으로 생성 된 층 내부에 일부 반응 구성 요소를 렌더링하려고합니다.

_onCreate(e) { 
     var layer = e.layer 
     layer.bindPopup(
      <Content> 
       <Label>Flower Name</Label> 
       <Input type="text" placeholder="Flower Name"/> 
       <Label>Flower Index</Label> 
       <Input type="number" placeholder="Flower Index"/> 
       <Label>Flower Radius</Label> 
       <Input type="number" placeholder="Flower Radius"/> 
       <Button color="isSuccess" >Add Flower</Button> 
      </Content> 
     ) 
    } 

구성 요소가 react-bulma에 의해 제공됩니다 :

이

내 시도이다.

하지만 다음과 같은 오류가 발생합니다. Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

콘텐츠를 간단한 문자열로 만들면 일반 HTML 필드와 버튼은 있지만 외부 함수 나 실제 Bulma 구성 요소는 액세스 할 수 없습니다.

기본적으로 데이터베이스에 새 셰이프를 저장할 수 있기를 원합니다.

간략한 온라인 검색에서 이는 react-leaflet의 제한 사항으로 보이지만 여기서는 먼저 확인하고 싶습니다.

또한 새로 만든 도형에 팝업을 설정하는 가장 좋은 방법입니까? leaflet-draw 번 접근 방식을 react-leaflet-draw 번으로 번역하는 데 어려움을 겪고 있습니다.

Answer 1

반응 전단지 팝업 안에 반응 구성 요소가있을 수 있습니다. 귀하의 예에서는 대신 전단지의 구성 요소를 사용해야 할 때 전단지의 API를 사용하고 있습니다. 지도를 클릭 한 후 팝업을 보여주는 다음의 예를 참조하십시오

여기

const React = window.React; 
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet; 

let numMapClicks = 0 

class SimpleExample extends React.Component { 
    state = {} 

    addPopup = (e) => { 
    this.setState({ 
     popup: { 
     key: numMapClicks++, 
     position: e.latlng 
     } 
    }) 
    } 

    handleClick = (e) => { 
    alert('clicked') 
    } 

    render() { 
    const {popup} = this.state 
    return (
     <Map 
     center={[51.505, -0.09]} 
     onClick={this.addPopup} 
     zoom={13} 
     > 
     <TileLayer 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     {popup && 
      <Popup 
      key={`popup-${popup.key}`} 
      position={popup.position} 
      > 
      <div> 
       <p>A pretty CSS3 popup. <br/> Easily customizable.</p> 
       <button onClick={this.handleClick}>Click Me!</button> 
      </div> 
      </Popup> 
     } 
     </Map> 
    ); 
    } 
} 

window.ReactDOM.render(<SimpleExample />, document.getElementById('container')); 

입증하는 jsfiddle이다.