javascript - 反応リーフレットを使用して、マーカー内に動的 JSX 要素を実装する

Question

私は、react-leafletを介してLeafletを使用している React アプリを持っています。どちらも非常に便利なライブラリです。

このアプリには、次のようにレンダリングする必要がある座標のグループがあります。

1. ズームアウトすると、次のように座標をマーカー クラスターにクラスター化します。

2. ズームインすると、各マーカーには

   1. その下の動的カウントダウンタイマー
   2. その周りの動的な SVG カウントダウン時計

クラスタリングには、静的コンテンツの表示に最適なreact-leaflet-markerclusterプラグインを使用しています。

しかし、各マーカー内に動的コンテンツを表示する必要がある場合、 を送信するオプションはありません。ここでJSX利用可能な例からわかるように、静的 HTML の準備しかありません。

// Template for getting popup html MarkerClusterGroup
// IMPORTANT: that function returns string, not JSX
function getStringPopup(name) {
  return (`
    <div>
      <b>Hello world!</b>
      <p>I am a ${name} popup.</p>
    </div>
  `);
}

// that function returns Leaflet.Popup
function getLeafletPopup(name) {
  return L.popup({ minWidth: 200, closeButton: false })
    .setContent(`
      <div>
        <b>Hello world!</b>
        <p>I am a ${name} popup.</p>
      </div>
    `);
}

この状況を処理する方法はありますか? 静的 HTML マーカーの代わりに JSX マーカーを作成するにはどうすればよいですか?

PS：私はReactDOM.renderToStringすでに使ってみましたが、それは醜いハックであり、毎回マーカーを再レンダリングする必要があります.

ティア!!

解決策を考えている場合に試してみるためのWebpackBinのサンプルを次に示します。