使用useRef更改React-Leaflet TileLayer上的css filter属性
提问于 2021-02-24 17:19:28
我正在尝试更改React-LeafletTileLayer..。基本上，我想做的是通过调整 .leaflet-tile 类上的过滤器样式属性，在不调暗/改变标记的情况下调暗平铺层使用按钮或滑块。
我在这里有一个代码沙盒设置，其中包含我迄今为止尝试过的内容。
我首先将MapContainer组件包装在一个div中，并使用useRef hook，如下所示：
const tileRef = useRef(null);
A pretty CSS3 popup.
Easily customizable.然后，我设置了一个监视brightnessLevel状态钩子的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-Leaflet: 3.1.0
- 单张: 1.7.1
- React: 17.0.1
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-25 09:07:42
你应该分配tileRef至TileLayer而不是父级MapContainer'sdiv..。使用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]);
<>
Change filter property
setFilter(e.target.value)}
value={filter}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66355741
复制相关文章
点击加载更多
相似问题
SERVER基于一年内最早日期的获取记录
Excel如何返回一年内的日期
如何从两年内获得记录
从当前日期起的最后一年内修改记录。
如何根据记录的日期时间查找记录
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
