Как создать новую ссылку для каждого экземпляра компонента

Question

Как создать ссылку для каждого экземпляра компонента

Я извлек некоторый код в его собственный компонент. Компонент представляет собой компонент анимации PlayWhenVisible, который воспроизводит / останавливает анимацию в зависимости от того, отображается ли элемент.

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

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, который переполнял контейнер и приводил к ошибкам при запуске.