TypeError: Невозможно прочитать свойство 'offsetHeight' с нулевым значением после изменения размера экрана при использовании React.createRef - PullRequest
Новая
       12

TypeError: Невозможно прочитать свойство 'offsetHeight' с нулевым значением после изменения размера экрана при использовании React.createRef

0 голосов
/ 24 апреля 2019

Я пытаюсь прикрепить ссылку к каждому StyledSlide стилизованному компоненту ниже и затем измерить offsetHeight каждого, чтобы определить, какой слайд самый высокий.

Ниже я использую React.createRef.Это почти нормально работает для начального рендеринга, но когда я изменяю размер браузера, я получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'offsetHeight' из null

Если я выполняю console.log(this.refArray), я все равно вижу каждую ссылку и нахожу offsetHeight в консоли.

Я пытаюсь изменить размер, чтобы пересчитать самый высокий слайд.

Ниже приведен псевдо-пример основных частей, которые имеют отношение: 

class CarouselComponent extends React.Component {
  constructor(props) {
    super(props);
    this.refArray = [];
  }

  handleResize = () => {
    let highestSlide = 0;

    this.refArray.forEach(ref => {
      if (highestSlide < ref.current.offsetHeight) {
        highestSlide = ref.current.offsetHeight;
      }
    });
    console.log(`highest slide: ${highestSlide}`);
    console.log(this.refArray);
  };

  componentDidMount() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  getAllSlides = () => {
    const { collectionOfSlides } = this.props;

    return collectionOfSlides.map((component, index) => {
      const slideHeightRef = React.createRef();
      this.refArray.push(slideHeightRef);
      return (
        <StyledSlide key={index} innerRef={slideHeightRef}>
          {React.cloneElement(component)}
        </StyledSlide>
      );
    });
  };

  render() {
    return <div>{this.getSlides()}</div>;
  }
}

Будем весьма благодарны за любые предложения о том, как лучше двигаться вперед!Или как лучше всего решить эту проблему

1 Ответ

2 голосов
/ 24 апреля 2019

Вероятно, события изменения размера срабатывают до того, как ваш элемент отрендерен.Просто добавьте дополнительное условие: 

  handleResize = () => {
    let highestSlide = 0;

    this.refArray.forEach(ref => {
      if (ref.current && highestSlide < ref.current.offsetHeight) {
        highestSlide = ref.current.offsetHeight;
      }
    });
  };
...