如何获取元素的高度，然后用它来设置另一个元素的高度

Question

我有一个 id='contour' 响应的 img 元素。 最重要的是，我有一个 SVG 元素（id='wisla-id'），我需要使用 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>
    )
}

我试图弄清楚如何动态获取 90% 的 img id='contour' 高度并将其设置为 svg id='wisla-id'。 我猜应该使用 useRef，但我不确定如何正确使用。 我将不胜感激任何线索。

Answer 1

您可以使用 ref 钩子，然后获取该组件的 ref.current.height：

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 Polska

然后将其传递给子组件：

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>
)

}