下载 React 渲染的 SVG

Question

我想在我的 SPA 上实现导出功能，包括生成一堆 SVG（使用 React JSX 生成）并一次下载一个。

文件数量庞大，浏览器无法同时显示。我发现 React Download SVG 允许下载已经在 DOM 中的 SVG。

但是，React 的渲染管道无法让我批量下载，因为我无法控制我的 JSX SVG 的显示周期。

如何在不显示的情况下下载我所有的 SVG（将它们压缩到一个文件中会更好）？

提前致谢，

Answer 1

我遇到过类似的问题 - 为 CNC 目的生成参数化 SVG 路径。

问题不在于手动调用的下载（在 DOM 更新之后）- 也计划了批量下载（压缩）。

问题是：如何在另一个 node/component 中显示 SVG source/xml 以进行调试 - 在每次参数更改时更新。

However, the render pipeline of React does not enable me to batch the downloading because I don't control the display cycle of my JSX SVG.

这是真的……毫无意义，甚至更难，而 React Fiber 可以延迟一些 DOM 更新 - 但 我们有一些可能性 被通知。

componentDidUpdate() - 但是 'not called for the initial render'
ref callback - 但是'...定义为内联函数，它会在更新期间被调用两次，第一次是 null，然后是 DOM元素'

出于某些原因，我更喜欢第二种方法，f.e。对 SVG（功能）组件内部结构是中性的——但是不能保证在每个用例中都会被调用——如果不需要的话它不会被调用——OTOH CDM 和 CDU 在被调用时保证有 updated/proper refs。

在某处找到另一个提示（SO？）：使用 setTimeout 作为 safe/sure 在 DOM 更新 之后调用的回调。

downloadableReference = el => { 
  console.log("DWNLD_REF ",el); 
  this.svgElement = el        // save in wrapper, prevent old ref usage
  if( !!el ) {   // not null - second pass, fresh, updated
    console.log("DWNLD_REF ready ", el.outerHTML )
    setTimeout( ()=>{
      this.notifyDownloadableDependants()  // safest way - will be called after CDU
    }, 0 )
  } 
}

这个可以结合起来批量下载。对于 UX，我会按顺序渲染它们——带有进度可视化、可取消处理等。

另一种可能性：- 也许（未测试）使用 react-jsx-parser 会有帮助？

下载 React 渲染的 SVG

Download SVGs rendered by React

svg

shadow-dom

reactjs