React里怎样正确读取scrollHeight

在 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 的值。