时间戳

首页 > 解决方案 > 将 ref 反应到没有钩子的功能组件？

javascript - 将 ref 反应到没有钩子的功能组件？

问题描述

我试图找出一个元素当前是否可见。问题是我需要该组件的引用，但它是一个功能组件，所以我收到错误Function components cannot be given refs

class ShowPosts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      sorting:'desc',
      lastPostDate:'none',
      hasMore:false,
      pageNumber:0
    };
    this.lastPostRef = React.createRef();
  }
 render(){
  //Irelevant code above
       postList = posts.map((post, k) =>
      {
        if(k===posts.length-1)
          return <PostCard ref={this.lastPostRef} post={post} key={k} />
        return <PostCard post={post} key={k} />
      }
}
...

编辑： 我试图找出是否通过滚动（尝试实现分页）到达该元素。所以我会在我的滚动监听器中使用它

  onScroll()
  {
    console.log(`Last post is ${this.lastPost}`);
    if(this.lastPostRef)
    {
      var rect = this.lastPostRef.getBoundingClientRect();
      var elemTop = rect.top;
      var elemBottom = rect.bottom;
      console.log(elemTop < window.innerHeight && elemBottom >= 0);//Check if element is visible
    }
  }

标签： javascriptreactjs

解决方案

您可以使用 forwardRef 在功能组件内传递 ref。在此处查看文档

const PostCard = React.forwardRef((props, ref) => (
  ...
));

推荐阅读