在 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 (
    <div
      ref={containerRef}
      style={{
        width: '300px',
        height: '200px',
        overflowY: 'scroll',
        border: '1px solid black',
      }}
    >
      <div style={{ height: '500px' }}>
        This is some content that will cause the container to scroll.
      </div>
    </div>
  );
};

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 (
    <div>
      <h1>Scroll Component Example</h1>
      <ScrollComponent />
    </div>
  );
};

export default App;

現在，當你運行你的應用程序時，你應該能在控制臺中看到 scrollHeight 的值。