在反应传单上的反应传单绘制绘制层的弹出窗口内渲染反应组件

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

可以在 react-leaflet Popup 中包含 React 组件。在您的示例中，您使用的是传单的 API 而您应该使用 react-leaflet 的组件。请参阅以下单击地图后显示弹出窗口的示例：

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来演示。

在反应传单上的反应传单绘制绘制层的弹出窗口内渲染反应组件

Rendering react components inside popup of react-leaflet-draw drawn layer on react-leaflet

reactjs

react-leaflet