web-dev-qa-db-ja.com

React document.createElement（）と同等）

私は現在、Reactアプリで Mapbox を使用しています。カスタムマーカーを作成するには、次のような操作を行う必要があります。

_var el = document.createElement('div');
el.className = 'marker';

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
_

Reactなので、次のことを試してみました。

_new mapboxgl.Marker(<div className='marker' />)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
_

しかし、それは機能しません...上記のコンテキストでは、document.createElement()と同等のものは何でしょうか？ document.createElement()を使用すると機能しますが、それは物事を行うための「正しい」方法ではないと感じています。また、マーカーをそれ自体のコンポーネントに抽象化したいと思います...

javascriptreactjsmapboxmapbox-gl-js
4
user818700

Reactの秘訣の一部は、実際のDOMを支援できる場合は対話せず、状態または小道具が変更された場合に仮想DOMを更新し、Reactにレンダリングを処理させることです。

従来のDOM操作を行う必要がある場合は、refs（ https://reactjs.org/docs/refs-and-the-dom.html ）を使用して分離して処理します。 。通常は控えめに使用されますが、Mapboxでの使用には最適のようです

これに対する私の非常に素朴な例は次のとおりです。

// Very simplified
class MapboxWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.markerRef = React.createRef();
  }

  createMarker() {
    new mapboxgl.Marker(this.markerRef)
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);
  }

  componentDidMount() {
    this.createMarker();
  }

  render() {
    return (
      // ...Wrapper elements that you might need
      <div ref={this.markerRef} className="marker" />
    )  
  }
}

@jumoelの好意により、 https://github.com/mapbox/mapbox-react-examples/tree/master/react-tooltip および https：/）の例を読むことをお勧めします。 /github.com/mapbox/mapbox-react-examples/ より一般的には、この例よりも具体化されているためです。

2
DogPawHat

私は同じ問題を抱えていて、2つの解決策を思いつきました：

解決策1

1. ReactDOMライブラリをインポートします。

import ReactDOM from 'react-dom';

2.公式のMapboxチュートリアルが示唆するように、空のdivを作成します。

const el = document.createElement("div");
el.className = "marker";

3.マーカーReactコンポーネントを新しく作成されたel要素にレンダリングします：

ReactDOM.render(<div className='marker' />, el);

4.マップに追加します

new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

解決策2

1.ReactDOMServerライブラリをインポートします。

import ReactDOMServer from 'react-dom/server';

2.公式のMapboxチュートリアルが示唆するように、空のdivを作成します。

const el = document.createElement("div");
el.className = "marker";

3.マーカーReactコンポーネントから静的HTMLマークアップを作成し、それをel.innerHTMLに割り当てます。

el.innerHTML = ReactDOMServer.renderToStaticMarkup(<div className='marker' />);

4.マップに追加します

new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

注ソリューション2には1つの欠点があります。マーカー要素は、プレーンなHTMLマークアップになるため、対話性とライフサイクルメソッド（基本的にはReactから得られるすべての利点）を失います。

0
Mariusz Pilarczyk

React Mapboxのラッパー： react-mapbox-gl

<Marker coordinates={coordinates} className={className}>
0
hsz