在 React 中，要正确读取元素的 scrollHeight，你需要使用 Ref 和 useEffect。scrollHeight 是一个只读属性，它表示元素的内容高度（以像素为单位），包括溢出导致的滚动条。以下是一个简单的示例：

1. 首先，确保你已经在项目中安装了 React 和 ReactDOM。

2. 创建一个名为 ScrollComponent.js 的文件，并在其中编写以下代码：

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

const ScrollComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      console.log('scrollHeight:', containerRef.current.scrollHeight);
    }
  }, []);

  return (
    

      

        This is some content that will cause the container to scroll.
      
    
  );
};

export default ScrollComponent;

在这个示例中，我们创建了一个名为 ScrollComponent 的函数组件。我们使用 useRef 创建了一个名为 containerRef 的 Ref，并将其附加到包含滚动内容的 div 上。然后，我们使用 useEffect 在组件挂载时读取 scrollHeight。当组件挂载时，useEffect 内的回调函数将被执行，输出 scrollHeight。

3. 最后，在你的主要应用文件（例如 App.js）中，导入并使用 ScrollComponent：

import React from 'react';
import ScrollComponent from './ScrollComponent';

const App = () => {
  return (
    

      
Scroll Component Example
      
    
  );
};

export default App;

现在，当你运行你的应用程序时，你应该能在控制台中看到 scrollHeight 的值。