1

我使用react-leaflet在地图上可视化了一条很长的路径。用户可以从列表中选择，我希望所选路径具有不同的颜色。更改状态并再次渲染太慢，我正在寻找更快的解决方案。

传单路径元素有 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呢？

4

2 回答 2

9

中的组件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. 在 React 中使用字符串作为“ref”被认为是遗留问题，因此您可能想要做一些稍微不同的事情（请参阅此处）。这leafletElement是这里的重要部分。

而不是上面的代码，最好只Polyline 为您的自定义组件扩展组件（此处的有限文档）：

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

让我知道这是否适合您。

于 2016-07-31T14:09:32.243 回答
0

使用 React 回调引用并添加到上面@Eric 答案的完整示例：

export default class MyMap extends Component {

  leafletMap = null;

  componentDidMount() {
    console.debug(this.leafletMap);
  }

  setLeafletMapRef = map => (this.leafletMap = map && map.leafletElement);

  render() {
    return (
      <Map
        ref={this.setLeafletMapRef}
      >
        <TileLayer
          attribution="Powered by <a href=&quot;https://www.esri.com&quot;>Esri</a>"
          url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
        />
      </Map>
    );
  }
}
于 2018-09-28T16:54:41.947 回答