反応リーフレット上の反応リーフレット描画されたレイヤのポップアップ内の反応コンポーネントのレンダリング

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です。