下载 React 渲染的 SVG答案

【问题标题】：Download SVGs rendered by React下载 React 渲染的 SVG
【发布时间】：2017-11-16 22:56:08
【问题描述】：

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

文件数量巨大，我无法在浏览器上同时显示它们。我找到了React Download SVG，它允许下载已经在 DOM 中的 SVG。

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

我怎样才能下载我所有的 SVG（将它们压缩到一个文件中是一个优势）而不显示它们？

提前致谢，

【问题讨论】：

标签： reactjs svg shadow-dom

【解决方案1】：

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

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

问题是：如何在另一个节点/组件中显示 SVG 源/xml 以进行调试 - 在每次参数更改时更新。

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

这是真的……没有意义，更难的是 React Fiber 可能会延迟一些 DOM 更新 - 但 我们有一些可能性 需要通知。

componentDidUpdate() - 但“未调用初始渲染”
ref 回调 - 但是'... 定义为内联函数，它会在更新期间被调用两次，第一次使用 null，然后再次使用 DOM 元素'

出于几个原因，我更喜欢第二种方法，例如对 SVG（功能性）组件内部保持中立 - 但是不能保证在每个用例中都会调用它 - 如果不需要，也不会调用 - OTOH CDM 和 CDU 保证在调用时具有更新/正确的参考。

在某处发现的另一个提示（SO？）：使用setTimeout 确保在 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 会有所帮助？

【讨论】：