代码之家 › 专栏 › 技术社区 › TaoPaipai

如何在hoc中获取包裹组件的高度?

react-ref dom reactjs html

TaoPaipai · 技术社区 · 6 年前

是否有任何方法可以获得封装组件的DOM高度?

我试图添加一个引用,但控制台错误了我 Function components cannot be given refs.

我设置了 forward ref 但情况似乎并非如此。

export default function withInfiniteScroll(Component) {  
  return class extends React.Component {
    componentDidMount() {
      window.addEventListener('scroll', this.onScroll, true);
    }
    onScroll = () => {
      // here
      console.log(
        'window.innerHeightð', window.innerHeight,
        '\ndocument.body.offsetHeightð', document.body.offsetHeight,
      );
    }
    render() {
      return <Component {...this.props} />;
    }
  };
}

我想记录 Component 但是这些日志毫无意义,它们是HTML正文的高度,而不是 成分 s。

window.innerHeightð 767 
document.body.offsetHeightð 767

但当我在Chrome控制台中时:

console.log(document.getElementsByClassName('home-container')[0].clientHeight)
> 1484

哪一个 'home-container' 是包装组件:

withInfiniteScroll(HomeContainer);

1 回复 | 直到 6 年前

Estus Flask 6 年前

包装的组件应使用 forwardRef :

function withInfiniteScroll(Component) {  
  return class extends React.Component {
    ref = React.createRef();

    componentDidMount() {
      window.addEventListener('scroll', this.onScroll, true);
    }

    onScroll = () => {
      console.log(this.ref.current.clientHeight);
    }

    render() {
      return <Component ref={this.ref} {...this.props} />;
    }
  };
}

const Foo = React.forwardRef((props, ref) => (
  <div ref={ref}>Foo</div>
));

const FooWithScroll = withInfiniteScroll(Foo);

或包装组件应添加容器dom元素:

function withInfiniteScroll(Component) {  
  return class extends React.Component {
    // ...same as above

    render() {
      return <div ref={this.ref}><Component {...this.props} /></div>
    }
  };
}

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

3 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

3 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

3 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前