javascript - 如何编辑收到的 JSX 元素以将 prop 附加到其中的任何 img 元素？

Question

我希望能够向传递给我的函数的 JSX 元素内的任何图像或视频元素添加 onLoad/onAbort 属性。

我正在创建一个接受 JSX 元素并以选定模式显示它们的库组件。这个想法是任何 JSX 元素都可以传入，并且它将被格式化和显示。为了使其正常工作，特别是执行多次传递的排序算法，我需要知道图像和视频何时加载并采用其原始分辨率，以便我可以缩放它们并保留比率。为此，我想将 onload 和 onabort 属性附加到传递给我的函数的 JSX 元素中包含的每个图像，该函数更新我的组件状态，告诉组件图像已加载。

我不确定如何执行此操作，因为传入的 JSX 元素的结构没有限制。它可以具有任何级别的嵌套，并且图像或视频可以位于该结构内的任何位置。如果我在渲染后进行，我会这样做:

   //gridRef.current is the grid element ref I get through useRef()
   const images = gridRef.current.querySelectorAll('img');
   images.forEach((image, index) => {
      if (image.complete) //mark current image as already loaded
      else {
         image.onload = () => {
            //mark current image as loaded after it loads
         };
         image.onabort = () => {
            //mark current image as loaded after it aborts
         };
         image.onerror = () => {
            //mark current image as loaded after it errors out
         };
         //mark current image as not loaded yet
      }
   });

视频也是如此。不过，我不想在渲染后执行此操作，因为图像可能在 image.complete 检查之后和附加监听器之前加载，这会导致错误。在渲染元素之前执行此操作会更自然，但是如何执行呢？

我想要以下其中一项:

1) 类似于 image.complete 属性的东西，它告诉我是否加载了所有后代元素，因此，如果我在网格元素上使用它，只有在加载所有后代节点中的所有图像后，它才会返回 true。然后我可以在渲染后进行此检查，而无需编辑 JSX。

2) 一种搜索 JSX 元素层次结构并检索然后编辑所有 img 和 video 元素的方法。

3) 当所有组件后代都已加载时触发函数的属性。

4)任何其他可以实现相同目标的事情。

Answer 1

我目前使用的一个解决方案是仅使用递归超时来查看由

获取的所有图像

   const images = gridRef.current.querySelectorAll('img');

并检查每个 image.complete ，如果它们都为真，它会调用我的排序函数，如果不是，它会调用它的 self 并在超时后再次检查。它对于图像来说效果很好，但视频元素没有 .complete 属性。

编辑:视频有一个 .readyState 属性，可以正常工作。