react如何获取dom的高度

你可以使用React中的`useRef`来获取DOM元素的引用并通过`clientHeight`属性获取其高度。下面是一个示例代码：

import React, { useRef, useEffect } from "react";

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      const height = myElementRef.current.clientHeight;
      console.log("DOM元素的高度为：", height);
    }
  }, []);

  return <div ref={myElementRef}>我是一个DOM元素</div>;
}

在上面的代码中，我们使用`useRef`创建了一个`myElementRef`引用，然后将该引用赋值给要获取高度的DOM元素的`ref`属性。通过`useEffect`钩子，我们在组件挂载后获取DOM元素的高度。注意，我们在`useEffect`的依赖数组中传递了一个空数组，这样可以确保该效果只运行一次，即组件挂载时运行一次。

当组件渲染时，DOM元素的高度将被打印到控制台中。你可以根据自己的需求修改代码来使用获取到的高度。

相关问题

react获取dom的宽高不同展示不同的样子

你可以使用React的`useState`钩子来存储DOM元素的宽高，并使用`useEffect`钩子来监听DOM元素的变化。

下面是一个示例代码：

import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    const rect = myRef.current.getBoundingClientRect();
    setWidth(rect.width);
    setHeight(rect.height);
  }, []);

  return (
    <div ref={myRef}>
      {width > height ? (
        <div style={{ width: '100%', height: '50px', backgroundColor: 'red' }}>Landscape</div>
      ) : (
        <div style={{ width: '50px', height: '100%', backgroundColor: 'blue' }}>Portrait</div>
      )}
    </div>
  );
}

在上面的代码中，我们使用`useRef`钩子创建了一个`myRef`引用并将其分配给外部`<div>`元素的`ref`属性。然后，我们使用`useState`钩子创建了`width`和`height`状态变量，并将其初始值设为0。

接下来，我们使用`useEffect`钩子来监听DOM元素的变化。在第二个参数中传入一个空数组，表示只在组件挂载时执行一次。在回调函数中，我们使用`getBoundingClientRect()`方法获取DOM元素的宽高，并将其分别设置为`width`和`height`状态变量的值。

最后，我们根据`width`和`height`的值来展示不同的样式。如果宽度大于高度，则展示横向的红色`<div>`，否则展示纵向的蓝色`<div>`。

react怎么动态获取div高度

在React中，可以通过Refs获取DOM节点，然后使用offsetHeight属性来获取DOM元素的高度。具体实现步骤如下：

1. 在组件中定义一个ref对象，用于获取DOM节点：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

2. 在需要获取高度的地方，使用ref对象获取DOM节点，并获取其高度：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const height = this.myRef.current.offsetHeight;
    console.log(height);
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

在这个例子中，我们在组件中的componentDidMount()方法中获取了DOM元素的高度，并在控制台中打印出来。你可以在其他适当的生命周期方法或事件处理程序中使用相同的方法来获取DOM元素的高度。