React.js useRef / createRef当前滚动始终为空

React.js中的useRef和createRef都是用于在函数组件中创建对DOM元素或组件实例的引用的钩子函数。

useRef是React提供的一个Hook函数，它返回一个可变的ref对象，该对象的current属性可以被赋值为任意值。useRef在组件重新渲染时不会被重新赋值，因此可以用来存储和访问组件的状态，而不会触发重新渲染。在本例中，可以使用useRef来创建一个对滚动元素的引用。

createRef是React类组件中的一个方法，它返回一个可变的ref对象，该对象的current属性可以被赋值为任意值。与useRef不同，每次组件重新渲染时，createRef都会返回一个新的ref对象。因此，createRef适用于类组件中需要在重新渲染时重新引用DOM元素或组件实例的情况。

对于当前滚动始终为空的问题，可能有以下几个原因：

1. 滚动元素未正确绑定ref：确保在滚动元素上正确使用ref属性，并将其绑定到useRef或createRef返回的ref对象上。
2. 滚动元素未正确设置高度或样式：如果滚动元素没有设置高度或样式，可能导致滚动条无法显示或无法滚动。请确保滚动元素具有适当的高度和样式。
3. 滚动元素内容为空：如果滚动元素没有内容，滚动条可能会始终为空。请确保滚动元素中有足够的内容以触发滚动。

针对这个问题，可以尝试以下解决方案：

1. 使用useRef创建对滚动元素的引用：

import React, { useRef } from 'react';

function MyComponent() {
  const scrollRef = useRef();

  // 在需要滚动的时候，使用scrollRef.current来访问滚动元素

  return (
    <div ref={scrollRef} style={{ height: '200px', overflow: 'auto' }}>
      {/* 滚动元素的内容 */}
    </div>
  );
}

1. 使用createRef创建对滚动元素的引用：

import React, { createRef, Component } from 'react';

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

  // 在需要滚动的时候，使用this.scrollRef.current来访问滚动元素

  render() {
    return (
      <div ref={this.scrollRef} style={{ height: '200px', overflow: 'auto' }}>
        {/* 滚动元素的内容 */}
      </div>
    );
  }
}

以上是针对React.js中useRef和createRef的使用方法和解决当前滚动始终为空的问题的建议。如果需要了解更多关于React.js的相关知识和使用技巧，可以参考腾讯云的React.js产品文档和教程：

• React.js产品介绍
• React.js官方文档
• React.js中文文档