Question

我正在尝试确定某个元素当前是否可见。问题是我需要对该组件的引用，但它是一个功能组件，所以我收到错误 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
    }
  }

Answer 1

您可以使用 forwardRef 在功能组件内部传递 ref。检查文档 here

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

Answer 2

如果您只是将 ref 附加到在 PostCard 中呈现的 DOM 元素，它看起来应该可以满足您的期望。而不是

return <PostCard ref={this.lastPostRef} post={post} key={k} />

你可以使用

return <PostCard theRef={this.lastPostRef} post={post} key={k} />

（绕过对 ref 道具名称的限制），然后在 postCard 内，执行以下操作：

const PostCard = ({ theRef, post }) => {
  // ...
  return (
    <div ref={theRef}>

以便 PostCard 将 ref 作为道具并将其作为道具传递给被渲染的元素。

如果需要，您还可以使用条件运算符代替 if 来减少重复性。在showPosts：

{
  <PostCard
    ref={k === posts.length - 1 ? this.lastPostRef : null}
    post={post}
    key={k}
  />
}

对没有钩子的功能组件的引用反应？

2 个答案: