我正在尝试在由 react-leaflet-draw
创建的层内渲染一些 react 组件.
这是我的尝试:
_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
.
最佳答案
可以在 react-leaflet Popup 中包含 react 组件。在您的示例中,您使用的是传单的 API,而您应该使用 react-leaflet 的组件。请参阅以下在单击 map 后显示弹出窗口的示例:
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='© <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展示。
关于reactjs - 在 react-leaflet 上的 react-leaflet-draw 绘制层的弹出窗口中渲染 react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42894803/