使用React钩子调整Google Maps GroundOverlay的不透明度

Question

在此代码沙箱https://codesandbox.io/s/overlayr-53zrl中，我试图将GroundOverlay的不透明度从其初始值0.5更改，

设置为我在下面的“覆盖不透明度”滑块中设置的值。但是，我注意到的是，如果更改滑块的值，则叠加层将变得完全不透明（对应于opacity的{​​{1}}）。

（我在使用1.0程序包的另一个仓库（https://khpeek.github.io/beomaps/）中进行了类似的工作（在https://github.com/khpeek/beomaps上进行了查看，但决定放弃该程序包作为其react-google-maps的实现似乎存在性能错误）。

此存储库的主要SearchBox组件具有一个App状态挂钩：

opacity

import React, { useState } from 'react'; import './App.css'; import Map from './components/Map'; import GroundOverlay from './components/GroundOverlay'; import SearchBox from './components/SearchBox'; import { withStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Container from '@material-ui/core/Container'; import Grid from '@material-ui/core/Grid'; import Box from '@material-ui/core/Box'; import Paper from '@material-ui/core/Paper'; import FormLabel from '@material-ui/core/FormLabel'; import Slider from '@material-ui/lab/Slider'; const styles = theme => ({ paper: { padding: theme.spacing(1.5), }, label: { textAlign: 'center', color: theme.palette.text.secondary, }, }) function App(props) { const [bounds, setBounds] = useState({}); const [opacity, setOpacity] = useState(0.5); function handleChange(event, value) { setOpacity(value); } return ( <div className="App"> <CssBaseline /> <Container> <Grid container spacing={2}> <Grid item xs={12}> <Map zoom={12} center={{ lat: 40.740, lng: -74.18 }} events={{ onBoundsChanged: arg => setBounds(arg) }} > <SearchBox /> <GroundOverlay url='https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg' bounds={{ north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655 }} opacity={opacity}/> </Map> </Grid> <Grid item xs={6}> <Paper className={props.classes.paper}> <Box flexDirection="column"> <FormLabel className={props.classes.label}>Overlay Opacity</FormLabel> <Box mt={1} mx={1}> <Slider value={opacity} min={0} max={1} onChange={handleChange} /> </Box> </Box> </Paper> </Grid> </Grid> </Container> </div> ); } export default withStyles(styles)(App); 组件只是将其道具转发到其自己的效果挂钩GroundOverlay：

useGroundOverlay

import useGroundOverlay from '../hooks/useGroundOverlay'; export default function GroundOverlay({ url, bounds, maps, map, events, opacity }) { useGroundOverlay({ url, bounds, maps, map, events, opacity }); return null; } 依次在其依赖项数组中包含useGroundOverlay：

opacity

我有点困惑为什么这不起作用？当我设置import { useEffect, useState } from "react"; export default function useGroundOverlay({ url, bounds, maps, map, opacity }) { const [groundOverlay, setGroundOverlay] = useState(); useEffect(() => { const groundOverlay = new maps.GroundOverlay( url, bounds ); groundOverlay.setMap(map); groundOverlay.setOpacity(opacity); setGroundOverlay(groundOverlay); }, [opacity]); return groundOverlay; } 组件的不透明度时，这些更改是否应该“传播”到App？