Question

我尝试将引用附加到下面的每个StyledSlide样式的组件上，然后测量每个offsetHeight的以确定哪个幻灯片是最高的。

下面我正在使用React.createRef。这对于初始渲染几乎可以正常工作，但是当我调整浏览器大小时，出现以下错误：

未捕获的TypeError：无法读取null的属性'offsetHeight'

如果执行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>;
  }
}

任何关于最佳前进方式的建议将不胜感激！或者如何最好地解决这个问题

Answer 1

调整大小事件可能在元素呈现之前触发。只需添加一个额外的条件：

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

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

TypeError：使用React.createRef调整屏幕大小后无法读取null的属性'offsetHeight'

1 个答案: