Question

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

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

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

如何在不显示SVG的情况下下载所有SVG（在文件中压缩它们是有利的）？

提前致谢，

Answer 1

我使用类似的问题 - 生成用于CNC目的的参数化SVG路径。

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

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

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

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

componentDidUpdate （） - 但“未调用初始渲染”
引用回调 - 但是'...定义为内联函数，它会在更新期间被调用两次，首先是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会有帮助吗？

下载React渲染的SVG

1 个答案: