React中如何渲染API返回的SVG字符串？

我在React应用中尝试展示API返回的SVG，获取数据后得到的是SVG内容字符串，但直接展示时仅显示为纯文本，请问该如何将其渲染为正常的SVG？

以下是自定义Hook代码：

const useChartFetch = (url, submited) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchChart = async() => {
        const res = await fetch(url)
        const data = await res.text();

        setData(data)
    }
    fetchChart();
  }, [submited]);

  return [data];
};

export default useChartFetch;

展示SVG的组件代码：

const ShowKundli = ({userData, submited}) => {

    const [chart] = useChartFetch(`https://api.vedicastroapi.com/v3-json/horoscope/chart-image?dob=${userData.dob}&tob=${userData.tob}&lat=${userData.lat}&lon=${userData.lng}&tz=5.5&div=D1&color=%23ff3366&style=north&api_key=c932d1d9-9d8b-5e22-9949-abec233387c9&lang=en`, submited);
    
  return (
    <div className=' bg-black text-white'>
        
            <div className=' mt-10 text-center flex justify-center'> 
                <h1 className='text-left text-6xl font-bold mb-10'>Chart</h1>
               {chart}
            </div>
    </div>
  )
}

解决方案 #

React默认会转义所有字符串内容，所以直接输出SVG字符串只会显示纯文本。要渲染实际的SVG，需要使用dangerouslySetInnerHTML属性，它允许React直接将字符串解析为HTML/SVG元素。

修改组件代码 #

将组件中直接输出{chart}的部分替换为：

<div dangerouslySetInnerHTML={{ __html: chart }} />

修改后的完整组件代码：

const ShowKundli = ({userData, submited}) => {

    const [chart] = useChartFetch(`https://api.vedicastroapi.com/v3-json/horoscope/chart-image?dob=${userData.dob}&tob=${userData.tob}&lat=${userData.lat}&lon=${userData.lng}&tz=5.5&div=D1&color=%23ff3366&style=north&api_key=c932d1d9-9d8b-5e22-9949-abec233387c9&lang=en`, submited);
    
  return (
    <div className=' bg-black text-white'>
        <div className=' mt-10 text-center flex justify-center'> 
            <h1 className='text-left text-6xl font-bold mb-10'>Chart</h1>
            {chart && <div dangerouslySetInnerHTML={{ __html: chart }} />}
        </div>
    </div>
  )
}

注意事项 #

• dangerouslySetInnerHTML的命名是为了提醒你：必须确保传入的内容是安全的，避免XSS攻击。如果API返回的内容不可控，建议先进行内容过滤。
• 额外添加了chart &&的判断，避免在数据未加载完成时渲染空内容。

备选方案（更安全） #

如果API支持直接返回SVG文件的URL（而非SVG字符串），可以直接使用<img>标签加载，这种方式更安全且无需处理HTML解析：

// 假设Hook改为获取SVG的URL而非文本
const [chartUrl] = useChartFetch(/* ... */);

return (
  // ...
  {chartUrl && <img src={chartUrl} alt="Horoscope Chart" />}
  // ...
)

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