當嘗試使用 Material-UI 的SvgIcon組件時，<path>它被引號包圍，導致 SVG 無法呈現。
我正在處理 MDX 檔案中的 Storybook。為了渲染 SVG，我嘗試了幾種方法，但它們都產生相同的輸出。這些嘗試中最直接的是：
import { accessibility1Icon } from '@cds/core/icon';
export const Template = (args) => {
return (
<SvgIcon {...args}>{accessibility1Icon[1].outline}</SvgIcon>
)
}
進入的參考<SvgIcon>確實是一個path. 它確實出現了（如上圖所示），但它在 DOM 中被引號包圍。
我可能遺漏了什么導致這些參考，或者可以做些什么來重新輸入參考以使它們不出現？
uj5u.com熱心網友回復：
因為您無法將 a 渲染string為JSX，所以
您必須找到一種將其轉換為 的string方法JSX。
1-使用的解決方案dangerouslySetInnerHTML：
import { accessibility1Icon } from '@cds/core/icon';
export const Template = (args) => {
return (
<SvgIcon {...args}>
<g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} />
</SvgIcon>
)
}
2-使用的解決方案html-react-parser
import { accessibility1Icon } from '@cds/core/icon';
import parse from 'html-react-parser';
export const Template = (args) => {
return (
<SvgIcon {...args}>
{parse(accessibility1Icon[1].outline)}
</SvgIcon>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475349.html
標籤：javascript svg 材料-ui 故事书
上一篇：關于svg中矩陣值e和f的誤解