Question

我有一个React组件，我将其用作检查点以检查用户是否查看了网站的特定部分。

class ContentSection extends Component {
 constructor(props) {
  super(props);
 }

render() {
const allParagraphs = [];

for (let i = 0; i < this.props.paragraphs.length; i++) {
  let p = this.props.paragraphs[i];

  allParagraphs.push(
    <Paragraph key={i} image={p["img"]} text={p["text"]} />
  );
}

return (
  <div className="cs">
    <ContentSectionCheckPointContainer
      uniqueIndex={this.props.uniqueIndex}
    />
    <h4 className="sectionTitle">THIS IS A SECTION!!!</h4>
    {allParagraphs}
  </div>
  );
 }
}

这是ContentSectionCheckPointContainer

const mapDispatchToProps = dispatch => {
 return {
  unlock: index => dispatch(Unlock_Index_Action(index))
  };
 };

const mapStateToProps = state => {
 return {
  CheckPoints: [...state.CheckPoints]
 };
};

class ContentSectionCheckPoint extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.myRect = null;
    this.checkVisibility = this.checkVisibility.bind(this);
  }

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

  componentWillUnmount() {
      window.removeEventListener('scroll', this.checkVisibility);
  }

  checkVisibility() {
    if (this.myRef.current) {
      let rect = this.myRef.current.getBoundingClientRect();
      var viewHeight = Math.max(
        document.documentElement.clientHeight,
        window.innerHeight
      );
      let b = !(rect.bottom < 0 || rect.top - viewHeight >= 0);
      if (b !== this.props.CheckPoints[this.props.uniqueIndex]) {
        if (b) {
          this.props.unlock(this.props.uniqueIndex);
        }else{
          this.props.unlock(this.props.uniqueIndex);
        }
      }
    }
  }

  render() {
this.checkVisibility();
    return (
      <div ref={this.myRef} className="cscp">
        {this.props.CheckPoints[this.props.uniqueIndex] && <p>hi</p>}
      </div>
    );
  }
}

const ContentSectionCheckPointContainer = connect(
mapStateToProps, mapDispatchToProps)(ContentSectionCheckPoint);

如您所见，我在滚动条上运行了可见性检查，效果很好。但是，我还想在加载页面之前立即进行可见性检查，然后再进行滚动。

据我了解，componentDidMount是React首次渲染元素时，因此我想进行检查。但是，我试图渲染两个ContentSection组件，每个组件都包含自己的检查点。由于未知原因，后一个检查点的位置高于componentDidMount期间屏幕上显示的位置，即使我的可见性检查不可见，它也会返回true。如果刷新页面，则其位置再次正确，可见性检查也很好。

此问题似乎仅在我第一次打开新标签页以加载代码时出现，而在刷新该标签页后不再发生。

知道为什么吗？

为什么我的React渲染的HTML元素刷新后会改变位置？

0 个答案: