Question

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

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

我正在组件构造函数内部创建一个ref，但是由于使用2个组件实例时会出现滞后，我想知道是否应该在组件外部创建ref并将它们作为道具传递，或者是否有为每个组件实例创建新实例的方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  <button id="delete-btn" class="delete-button">x</button>
  
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
       <p class="modal-text"> Are you sure you want to delete this comment?
        <br /><br /> You will not be able to undo this.</p>
         <form method="post" action="post?id">
          <div class="confirmation-delete">
           <a href="delete-comment" class="delete-comment" name="delete-comment">delete comment<a/>
          </div>
         </form>
     </div>
   </div>

Answer 1

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

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

1 个答案: