React组件生成SVG字符串失败，如何获取SVGOutput当前状态的字符串？

我正在开发一个从文本输入生成SVG的React应用，组件结构如下：

return(
    <>
    <SomeInputFields/>
    <ContextProvider value={{
        someVariables,
        forTheContext
    }}>
        <TextOptions/>
        <SVGOutput/>
    </ContextProvider>
    </>
);

SVGOutput组件的JSX：

return (
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    {
      svgData.map((svgPath, i) =>
        <path
          key={i}
          fill={svgPath.fill}
          d={svgPath.d}
          transform={svgPath.transform}
        />
      )
    }
  </svg>
);

尝试用react-dom/server的renderToString获取SVG字符串时，结果不符合预期：生成的SVG里没有DOM中存在的path元素，只返回空的svg标签，示例结果：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height:[object Object];width:800px" preserveAspectRatio="xMinYMin meet" width="20" height="20"></svg>

我猜测这是因为renderToString获取的是组件首次渲染的状态，而非更新后的状态。想知道有没有React框架内的方案能获取SVGOutput组件当前状态的字符串？目前能想到的是通过原生JS选择SVG元素转字符串，但希望用React原生方案解决。

1. 使用useRef直接获取真实DOM的SVG内容 #

这是最直接的React原生方案，通过ref绑定到SVG元素上，直接读取其outerHTML属性就能拿到当前状态的完整SVG字符串：

实现步骤： #

• 在SVGOutput组件中添加ref，并暴露获取字符串的方法：

import { useRef } from 'react';

function SVGOutput() {
  const svgRef = useRef(null);
  
  // 可通过context/props将该方法暴露给外部调用
  const getSVGString = () => {
    return svgRef.current?.outerHTML || '';
  };

  return (
    <svg
      ref={svgRef}
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      {svgData.map((svgPath, i) =>
        <path
          key={i}
          fill={svgPath.fill}
          d={svgPath.d}
          transform={svgPath.transform}
        />
      )}
    </svg>
  );
}

• 在需要触发获取的位置（比如父组件的按钮点击事件），调用getSVGString即可得到当前状态的SVG字符串。

2. 修正renderToString的调用逻辑 #

之前的问题核心是调用renderToString时传入的context值不是当前最新状态。确保传入的someVariables和forTheContext是组件当前使用的最新值，而非初始值：

import { renderToString } from 'react-dom/server';

// 从组件的state或context中获取最新的状态值
const latestContextValue = {
  someVariables: currentSomeVariables,
  forTheContext: currentForTheContext
};

const svgString = renderToString(
  <ContextProvider value={latestContextValue}>
    <SVGOutput/>
  </ContextProvider>
);

此时renderToString会基于最新状态渲染出包含path元素的完整SVG字符串。

3. 原生DOM操作方案（备选） #

如果上述React方案无法满足需求，也可以直接通过原生DOM选择器获取SVG元素：

const getSVGString = () => {
  const svgElement = document.querySelector('svg');
  return svgElement?.outerHTML || '';
};

内容的提问来源于stack exchange，提问作者user6329530