Реагируйте, как получить высоту обернутого компонента в HOC? - PullRequest
Новая
       9

Реагируйте, как получить высоту обернутого компонента в HOC?

0 голосов
/ 22 декабря 2018

Есть ли способ получить высоту 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-тела вместо Component.

window.innerHeight? 767 
document.body.offsetHeight? 767

Но когда я в консоли Chrome: 

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

Какой 'home-container' является обернутым компонентом: 

withInfiniteScroll(HomeContainer);

1 Ответ

0 голосов
/ 22 декабря 2018

Завернутый компонент должен либо предоставить ссылку на базовый элемент DOM с помощью 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>
    }
  };
}
...