反応リーフレットコンポーネントのリーフレットレイヤーの参照方法は？

Question

私は反応リーフレットを使って地図上のかなり長いパスを視覚化しました。ユーザーはリストから選択することができ、選択したパスに対して異なる色を使用したいと考えています。状態を変えてもう一度レンダリングするのが遅すぎる、私はより速い解決策を探しています。

リーフレットのパス要素にはsetStyle（）メソッドがあるため、最初のアイディアではレンダリングの代わりにそれを使用していました。しかし、リーフレット層をどのように参照するのですか？

class MyPathComponent extends React.Component { 

    shouldComponentUpdate(nextProps, nextState) { 
    if (nextProps.selected){ 
     this.setState({selected: true}); 
     LEAFLET_POLYLINE.setStyle({ 
     color: 'red' 
     }); 
    } 
    return false; 
    } 

    render() { 
    return(
     <Polyline polylines={this.props.path} /> 
    ); 
    } 
} 

は、だから私はこのコードでLEAFLET_POLYLINEの代わりに何を書くべきですか？

Answer 1

react-leafletのコンポーネントにはleafletElementというプロパティがあります。注意すべき

class MyPathComponent extends React.Component { 

    shouldComponentUpdate(nextProps, nextState) { 
    if (nextProps.selected){ 
     this.setState({selected: true}); 
     this.refs.polyline.leafletElement.setStyle({ 
     color: 'red' 
     }); 
    } 
    return false; 
    } 

    render() { 
    return(
     <Polyline ref="polyline" polylines={this.props.path} /> 
    ); 
    } 
} 

2つのこと：私はあなたがこのような何かができると信じて

1. を、私はこのコードをテストしていませんが、それはいくつかの小さな微調整が必​​要な場合があります。
2. "ref"の文字列を使用するのはReactではレガシーと見なされるため、若干異なるものを使用することをお勧めします（here参照）。ここではleafletElementが重要な部分です。代わりに、上記のコードの

、それはちょうどあなたのカスタムコンポーネントのためのPolylineコンポーネントを拡張する方が良いかもしれ（限られたドキュメントhere）：

import { Polyline } from 'react-leaflet'; 

class MyPathComponent extends Polyline { 

    shouldComponentUpdate(nextProps, nextState) { 
    if (nextProps.selected){ 
     this.setState({selected: true}); 
     this.leafletElement.setStyle({ 
     color: 'red' 
     }); 
    } 
    return false; 
    } 
} 

は、このいずれかがあなたのために働くなら、私を知ってみましょう。