Javascript 使用useRef更改React传单TileLayer上的css筛选器属性

我正在尝试更改上的“过滤器样式”属性。基本上，我想做的是使用一个按钮或滑块

到目前为止，我对我所做的尝试有一个新的认识

我首先将MapContainer组件包装在一个div中，并附加一个ref，如下所示：

const tileRef=useRef（null）；
一个漂亮的CSS3弹出窗口
易于定制。

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

const[brightLevel，setBrightLevel]=useState（100）；
useffect（（）=>{
如果（tileRef.current）{
if（tileRef.current.querySelector（“.传单tile”））{
if（tileRef.current.querySelector（“.传单tile”）.style）{
console.log（tileRef.current.querySelector（“.传单tile”）.style）；
如果(
tileRef.current.querySelector（“.传单tile”）.style.filter||
tileRef.current.querySelector（“.传单平铺”）.style.filter==“”
) {
控制台日志（“检查四次通过”）；
console.log（tileRef.current.querySelector（“.传单tile”）.style.filter）；
tileRef.current.querySelector（“.传单tile”）.style.filter=`亮度（${parseInt（brightLevel）}%）`；
}
}
}
}否则{
控制台日志（“无参考”）；
}
}，[brightLevel]）；

我不太清楚为什么我可以访问这个属性，并让它像更新console.log一样，但是显示中没有任何变化。有什么想法吗

版本：

• 反应传单：3.1.0
• 单张：1.7.1
• 反应：17.0.1

---

您应该将

tileRef

分配给

TileLayer

，而不是父

映射容器的

div

。使用

tileRef的.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}
      />
    </>

const tileRef=useRef（）；
const[map，setMap]=useState（null）；
const[filter，setFilter]=useState（100）；
useffect（（）=>{
如果（地图）{
蒂勒雷夫电流
.getContainer（）
.style.setProperty（“filter”，亮度（${filter}%）`）；
}
}，[map，filter]）；
更改过滤器属性
setFilter（e.target.value）}
值={filter}
/>