반응 전단지 구성 요소의 전단 층을 참조하는 방법은 무엇입니까?

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} /> 
    ); 
    } 
} 

두 가지주의 할 :

이 코드를 테스트하지 않았습니다

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; 
    } 
} 

이 중 하나가 당신을 위해 밖으로 작동하는지 알려줘 .