react里面通过className 获取某个dom元素的scrollHeight

在 React 中，可以使用 `ref` 获取 DOM 元素的引用，然后使用 `scrollHeight` 属性获取元素的滚动高度。以下是一个示例：

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

  componentDidMount() {
    // 获取元素的滚动高度
    const scrollHeight = this.myRef.current.scrollHeight;
    console.log(scrollHeight);
  }

  render() {
    return (
      <div className="my-class" ref={this.myRef}>
        {/* 元素内容 */}
      </div>
    );
  }
}

在上面的示例中，我们使用 `React.createRef()` 创建了一个 `ref`，并将其作为 `div` 元素的 `ref` 属性传递。在 `componentDidMount` 生命周期方法中，我们可以通过 `this.myRef.current.scrollHeight` 获取该元素的滚动高度。

相关问题

react通过ref获取frame内部的dom

如果您想在React中使用`ref`访问`iframe`中的DOM元素，可以使用`react-iframe`库。该库允许您将`iframe`作为React组件使用，并使用`ref`属性访问其内部DOM。

安装`react-iframe`：

npm install --save react-iframe

然后在您的代码中导入它：

import Iframe from 'react-iframe';

然后，您可以使用以下代码将`iframe`作为React组件使用：

<Iframe
  url="https://www.example.com"
  width="450px"
  height="450px"
  id="myId"
  className="myClassname"
  display="initial"
  position="relative"
  allowFullScreen
  ref={iframe => this.iframe = iframe}
/>

这将创建一个带有指定URL的`iframe`，并将其添加到您的React组件中。您可以使用`ref`属性访问`iframe`元素，如下所示：

this.iframe.someFunctionOnIframe();

请注意，您需要使用`ref`属性访问`iframe`元素之前，确保它已经被渲染到DOM中。

react 函数式组件如何获取dom节点

在 React 函数式组件中，获取 DOM 节点的方式与在类组件中有所不同，因为函数式组件没有实例化对象，因此无法使用 ref 属性来获取 DOM 节点。

通常情况下，React 鼓励开发者遵循“单向数据流”的原则，即通过 props 和 state 来管理组件的状态和数据，而不是直接操作 DOM 节点。因此，如果想要获取 DOM 节点，应该考虑使用 React 提供的 ref 回调函数或者 Hook。

1. 使用 ref 回调函数

可以通过 ref 回调函数来获取 DOM 节点，并将其保存在组件的 state 中。具体实现方式如下：

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

function MyComponent() {
  const [domNode, setDomNode] = useState(null);
  const handleClick = () => {
    console.log(domNode);
  };

  return (
    <div ref={node => setDomNode(node)}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

上面的代码中，我们使用 useState Hook 来定义一个 state 变量 domNode，然后在组件的 JSX 中使用 ref 属性来获取 DOM 节点，并将其传递给一个回调函数，这个回调函数会将当前的 DOM 节点作为参数，然后将它保存在 domNode 变量中。最后，我们可以在 handleClick 函数中打印 domNode 变量来获取 DOM 节点。

2. 使用 useRef Hook

另一种获取 DOM 节点的方式是使用 useRef Hook。useRef Hook 可以返回一个可变的 ref 对象，它的 current 属性可以存储任意值。具体实现方式如下：

import React, { useRef } from 'react';

function MyComponent() {
  const domNode = useRef(null);
  const handleClick = () => {
    console.log(domNode.current);
  };

  return (
    <div ref={domNode}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

上面的代码中，我们使用 useRef Hook 来定义一个 ref 对象 domNode，然后在组件的 JSX 中使用 ref 属性将其绑定到一个 DOM 节点上。最后，我们可以在 handleClick 函数中打印 domNode.current 属性来获取 DOM 节点。

总的来说，虽然在函数式组件中获取 DOM 节点比在类组件中麻烦一些，但是通过使用 ref 回调函数或者 Hook，我们仍然可以轻松地获取到需要的 DOM 节点。