使用 useRef 更改 React-Leaflet TileLayer 上的 css 过滤器属性答案

【问题标题】：Change css filter property on React-Leaflet TileLayer with useRef使用 useRef 更改 React-Leaflet TileLayer 上的 css 过滤器属性
【发布时间】：2021-05-27 01:24:47
【问题描述】：

我正在尝试更改 React-Leaflet TileLayer 上的过滤器样式属性。基本上，我想做的是使用按钮或滑块dim the tile layer without dimming/altering the markers by adjusting the filter style property on the .leaflet-tile class。

我有一个Code Sandbox setup here，到目前为止我已经尝试过。

我首先将 MapContainer 组件包装在一个 div 中，并使用 React's useRef hook 附加一个引用，如下所示：

const tileRef = useRef(null);

<div ref={tileRef}>
    <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
    >
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
</div>

然后，我设置了一个 useEffect 来监视亮度级别状态挂钩。在 useEffect 中，我使用 tileRef 来访问 .leaflet-tile css 类的 style.filter 属性。它正在访问它并在 console.log 中显示它，但显示中没有任何变化：

const [brightLevel, setBrightLevel] = useState(100);

useEffect(() => {
    if (tileRef.current) {
      if (tileRef.current.querySelector(".leaflet-tile")) {
        if (tileRef.current.querySelector(".leaflet-tile").style) {
          console.log(tileRef.current.querySelector(".leaflet-tile").style);
          if (
            tileRef.current.querySelector(".leaflet-tile").style.filter ||
            tileRef.current.querySelector(".leaflet-tile").style.filter === ""
          ) {
            console.log("Check Four pass");
            console.log(tileRef.current.querySelector(".leaflet-tile").style.filter);
            tileRef.current.querySelector(".leaflet-tile").style.filter = `brightness(${parseInt(brightLevel)}%)`;
          }
        }
      }
    } else {
      console.log("No Ref");
    }
}, [brightLevel]);

我不太确定为什么我可以访问该属性，并让它 console.log 就好像它正在更新一样，但显示中没有任何变化。有什么想法吗？

版本：

React 传单：3.1.0
传单：1.7.1
反应：17.0.1

【问题讨论】：

标签： javascript css reactjs leaflet react-leaflet

【解决方案1】：

您应该将tileRef 分配给TileLayer 而不是父MapContainer's div。使用

tileRef's .getContainer().style.setProperty 结合效果更改css属性。

const tileRef = useRef();

  const [map, setMap] = useState(null);
  const [filter, setFilter] = useState(100);

  useEffect(() => {
    if (map) {
      tileRef.current
        .getContainer()
        .style.setProperty("filter", `brightness(${filter}%)`);
    }
  }, [map, filter]);


 <>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{ height: "90vh" }}
        whenReady={setMap}
      >
        <TileLayer
          ref={tileRef}
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
      Change filter property
      <input
        type="text"
        name="name"
        onChange={(e) => setFilter(e.target.value)}
        value={filter}
      />
    </>

Demo

【讨论】：