将 React SVG 组件渲染为图像（使用 DATA URI）

Question

嗨，为了优化我巨大的 svg 组件，我正在尝试做一些类似于本教程的事情：https://medium.com/@ians/rendering-svgs-as-images-directly-in-react-a26615c45770 ，到目前为止我已经想出了这个

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server'
function Image({children})  {
    let draw = <svg xmlns="http://www.w3.org/2000/svg">{children}</svg>
    let svgToMiniDataURI = require('mini-svg-data-uri')
    let image = svgToMiniDataURI(renderToStaticMarkup(draw))
   return <image href={image} />
}
export default Image

它工作得很好，但出于一个原因我不想使用 renderToStaticMarkup：我在我的 SVG 组件中使用了 getBBox 方法，这确实很难避免使用。

有没有关于如何在不使用 SSR 的情况下实现类似功能的想法？或者任何让 getBBox 在服务器端工作的方法（我看到了 phantomjs 但我认为这会降低性能而不是帮助并且它似乎不是一个很好的解决方案）

Answer 1

因此，替代方法是获取我们在页面中加载的组件的引用，在 React 渲染后获取其 html 内容，然后更改它。这是我的例子的代码函数图像（{children}）{ 让 svgToMiniDataURI = require('mini-svg-data-uri')

  const imageContainer = React.useCallback(node => {
    if (node !== null) {
      Image.timer = setTimeout(()=>{ //I used this delay so my component get its useEffects done
        const image = svgToMiniDataURI(node.outerHTML)
        //here we could have also set a state with the href value and then based on that state in the return we choose to render the image instead of the normal comp 
        if (node.parentNode)
          node.outerHTML = `<image href="${image}" />`
      }, 0.1)
    }
  }, []) 
React.useEffect(() => {
  return () => {
    clearTimeout(Image.timer);
  }
}, [])
return <svg xmlns="http://www.w3.org/2000/svg" ref={imageContainer}>{children}</svg>
}

将 React SVG 组件渲染为图像（使用 DATA URI）

Rendering React SVG Components as images (using DATA URI)

reactjs

svg

optimization

server-side-rendering

data-uri