如何为每个组件实例创建一个新的 ref

Question

如何为组件的每个实例创建一个引用

我已经将一些代码提取到它自己的组件中。该组件是一个 PlayWhenVisible 动画组件，它根据元素是否在视图中来播放/停止动画。

我在组件构造函数中创建了一个引用，但是由于在使用组件的 2 个实例时出现了一些延迟，我想知道是否应该在组件外部创建引用并将它们作为道具传递，或者是否有一种为每个组件实例创建新实例的方法。

import VisibilitySensor from "react-visibility-sensor";
class PlayWhenVisible extends React.Component {
  constructor(props) {
    super(props);
    this.animation = React.createRef();
    this.anim = null;
  }
render() {
    return (
      <VisibilitySensor
        scrollCheck
        scrollThrottle={100}
        intervalDelay={8000}
        containment={this.props.containment}
        onChange={this.onChange}
        minTopValue={this.props.minTopValue}
        partialVisibility={this.props.partialVisibility}
        offset={this.props.offset}
      >
        {({ isVisible }) => {
          isVisible ? this.anim.play() : this.anim && this.anim.stop();
          return (
            // <div style={style}>
            <i ref={this.animation} id="animation" className={this.props.class} />
          );
        }}
      </VisibilitySensor>
    );
}
}

Answer 1

该问题是由 VisibilityChecker 组件引起的，该组件溢出容器并导致其在触发时不稳定。