reactjs - 将 react 组件传递给传单弹出窗口

Question

我在我的 react 代码中使用了传单，我没有使用 react 传单。我想将 react 组件或 jsx 代码传递给 binbPopup 函数到每个工具提示。

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

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

Answer 1

您可以使用 renderToString ReactDOMServer的方法将 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);  

这里的工作示例: https://codesandbox.io/s/leaflet-with-react-znk11