Tengo un elemento img con id='contour' que responde. Además, tengo un elemento SVG (id='wisla-id'), que necesito cambiar de tamaño con el img.
export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) return ( <div> <Row> <Col className='list-of-landscapes' sm={12} md={2} > <ul> <li> <button onClick={() => setRiverVisible(!riverVisible)}>rzeki</button> </li> <li> <button>jeziora</button> </li> </ul> </Col> <Col sm={12} md={10} className="rivers-box"> <img className='contour' src="images/polska-kontur.jpg" alt='polska'/> <Col className='rivers'> <Wisla riverVisible={riverVisible} setRiverVisible={setRiverVisible} /> </Col> </Col> </Row> </div> ) } export default Polska export const Wisla = ({riverVisible}) => { return ( <svg id='wisla-id' className={classNames('wisla', riverVisible && "visible")} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.47 625.89"> <g id="Warstwa_2" dataName="Warstwa 2"> <g id="Warstwa_2-2" dataName="Warstwa 2"> <Tooltip title='wisla wisla wisla wisla wisla wisla wisla wisla' followCursor> <path className="cls-wisla" d="M67.06,0V22.72l-6,6.14v52.8l-6.6,8.6v16l-6,11.67-13.8,6.75L4.06,162.1l45.6,19,9,17.19,15,19,28.2,10.43,48, 23.34,4.8,5.52h27l10.8-5.52,17.4,2.45,25.8,23.33,15,43.16,10.8,7.19,5.4,21.49,33,16,9.6,25.78-12,8.6,6.6,73.68-21, 25.79-31.2,19.65-21.6,8-7.2,8.59h-9l-13.2,14.74h-15.6l-9,8.6h-6.6l-2.4,7.36h-30.6l-5.4,6.32-12.6, 2.89-13.2-8.59-13.2-2.46-9.6.62-7.2,10.43-24,6.14.6,12.28,2.4,22.11,12.6,8.59"> </path> </Tooltip> </g> </g> </svg> ) }Estoy tratando de descubrir cómo tomar dinámicamente el 90% de la altura de img id = 'contour' y establecerlo en svg id = 'wisla-id'. Supongo que se debe usar useRef, pero no estoy seguro de cómo hacerlo correctamente. Estaré agradecido por cualquier pista.
Puede usar ref hook, luego obtener ref.current.height de ese componente:
export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const contourRef = useRef() return ( <div> <Row> <Col className='list-of-landscapes' sm={12} md={2} > <ul> <li> <button onClick={() => setRiverVisible(!riverVisible)}>rzeki</button> </li> <li> <button>jeziora</button> </li> </ul> </Col> <Col sm={12} md={10} className="rivers-box"> <img className='contour' ref={contourRef} src="images/polska-kontur.jpg" alt='polska'/> <Col className='rivers'> <Wisla riverVisible={riverVisible} setRiverVisible= {setRiverVisible} contourHeight={contourRef.current?.clientHeight} /> </Col> </Col> </Row> </div> ) } export default PolskaLuego páselo al subcomponente:
export const Wisla = ({riverVisible, contourHeight}) => { computedHeight = useMemo(() => contourHeight * 0.9, [contourHeight]) return ( <svg id='wisla-id' heigth={computedHeight} className={classNames('wisla', riverVisible && "visible")} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.47 625.89"> <g id="Warstwa_2" dataName="Warstwa 2"> <g id="Warstwa_2-2" dataName="Warstwa 2"> <Tooltip title='wisla wisla wisla wisla wisla wisla wisla wisla' followCursor> <path className="cls-wisla" d="M67.06,0V22.72l-6,6.14v52.8l-6.6,8.6v16l-6,11.67-13.8,6.75L4.06,162.1l45.6,19,9,17.19,15,19,28.2,10.43,48, 23.34,4.8,5.52h27l10.8-5.52,17.4,2.45,25.8,23.33,15,43.16,10.8,7.19,5.4,21.49,33,16,9.6,25.78-12,8.6,6.6,73.68-21, 25.79-31.2,19.65-21.6,8-7.2,8.59h-9l-13.2,14.74h-15.6l-9,8.6h-6.6l-2.4,7.36h-30.6l-5.4,6.32-12.6, 2.89-13.2-8.59-13.2-2.46-9.6.62-7.2,10.43-24,6.14.6,12.28,2.4,22.11,12.6,8.59"> </path> </Tooltip> </g> </g> </svg> )}