Question

我已经在我的项目及其工作中设置了React-Visibility-Sensor，但是每次子组件从isVisible = false更改为isVisible = true或反之亦然时，有问题的子组件将卸载并重新安装，从而导致该组件重新渲染，您可以在不到一秒钟的时间内看到它（快速闪烁）。我想我知道它的原因是因为它正在卸载和重新安装，但我不知道如何停止它。如果孩子被点击并且isVisible = false，我只希望它更新，否则什么都不做，但是没有访问孩子的状态。

我认为可能是因为我在功能组件内部使用了基于类的组件，并在道具更改时强制重新渲染。虽然那只是我的猜测。这是一些代码，只要将explorerVid的可见性设置为true并在子组件中执行诸如使视频播放等操作，它就可以检测explorerVid是否在视口中。

<div>
{this.props.exploreVids.length !== 0 &&
              containmentDOMRect !== null ? (
                this.props.exploreVids.map((key, index) => {
                  let uid = uuid.v4();
                  return containmentDOMRect ? (
                    <VisibilitySensor
                      key={uid}
                      offset={{ bottom: -150, top: -150 }}
                      // partialVisibility={true}
                      containment={containmentDOMRect}
                    >
                      {
                       ({ isVisible }) => {
                        let uid2 = uuid.v4();

                        return (
                          <ExploreVid
                            updateExploreClips={this.props.updateExploreClips}
                            index={index}
                            sendNotification={this.props.sendNotification}
                            admin={this.props.admin}
                            updateSharePopup={this.props.updateSharePopup}
                            removeClipfromLikedClips={
                              this.props.removeClipfromLikedClips
                            }
                            updateLikedClips={this.props.updateLikedClips}
                            user={this.props.user}
                            likedClips={this.props.likedClips}
                            isvisible={isVisible}
                            key={uid2}
                            details={key}
                            updateUserPopup={this.props.updateUserPopup}
                            updateUserPopupView={this.props.updateUserPopupView}
                          />
                        );
                      }}
                    </VisibilitySensor>
                  ) : null;
                })
              ) : (
                <div
                  style={{
                    minHeight: `100vh`,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center"
                  }}
                >
                  <ClipLoader
                    sizeUnit={"px"}
                    size={50}
                    color={"#098ff7"}
                    loading={this.state.loading}
                  />
                </div>
              )}
</div>

我不确定在功能组件内部包含组件是否“合法”，或者每次isVisible更改时如何解决此问题，以使其不会挂载/卸载。我可以将功能组件更改为基于类的组件并使用生命周期方法吗？我不确定该怎么做，因为我不知道isVisible的来源。

我尝试使用多种生命周期方法在子组件内部处理它，但始终会卸载并重新安装它。我认为这意味着问题出在父组件（这是我附加的代码）上，因为只有在isVisible发生更改时，它的内容才触发重新渲染。

任何帮助将不胜感激！

谢谢。

reactjs和react-visibility-sensor功能组件的新增功能将基于类的组件重新呈现在功能组件内部

0 个答案: