下载由React呈现的SVG

Question

我想在我的SPA上实现一个导出函数，包括生成一组SVG(使用React生成)，并同时下载它们。

由于文件数量庞大，我不能同时在浏览器上显示它们。我找到了SVG下载SVG，它允许下载已经在DOM中的SVG。

但是，React的呈现管道不允许我批量下载，因为我没有控制我的JSX的显示周期。

我如何下载所有SVG(在一个文件中压缩它们将是一个优势)而不显示它们？

提前谢谢你，

Answer 1

我处理过类似的问题--为数控系统生成参数化的SVG路径。

问题不在按手动调用(在DOM更新之后)-批下载(压缩)计划。

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

但是，React的呈现管道不允许我批量下载，因为我没有控制我的JSX的显示周期。

这是真的..。没有什么意义，更难的是反应光纤可以延迟一些DOM更新-但，我们有一些可能性的需要通知。

1. componentDidUpdate() --但“未调用初始呈现”
2. ref回调-但是..。定义为内联函数，它将在更新期间被调用两次，首先使用null，然后使用DOM元素‘

我喜欢第二种方法，有几个原因，f.e。中立到SVG (功能性)组件内部--但是并不保证在每个用例中都调用它--如果不需要，就不会调用它--当调用OTOH、CDM和CDU时，保证它们有更新/适当的参考。

另一个提示(所以？)：使用在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-解析器是有帮助的？