Question

我在我的React代码中使用传单，而不在使用react-leaflet。我想将react组件或jsx代码传递给binbPopup函数到每个工具提示。

let marker = new L.marker(...).bindPopup(<div>Hi</div>)

bindPopup获取字符串作为输入，所以我不能使用jsx。我也尝试使用react门户，但仍然无法正常工作。这个问题有什么解决方案？

Answer 1

您可以使用ReactDOMServer的{{3}}方法将React组件转换为标记字符串。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";
import * as L from "leaflet";
import "./styles.css";

const CustomReactPopup = () => {
  return (
    <div style={{ fontSize: "24px", color: "black" }}>
      <p>A pretty React Popup</p>
    </div>
  );
};

class App extends Component {

  componentDidMount() {
    var map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09])
      .addTo(map)
      .bindPopup(ReactDOMServer.renderToString(<CustomReactPopup />))
      .openPopup();
  }

  render() {
    return (
      <div>
        <div id="map" />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

此处的工作示例：renderToString

将React组件传递给传单弹出窗口

1 个答案: