我正在嘗試使用頁面中其他地方定義的svgwith <defs>。
const data = {
icons: {
freezable: "<svg><path d=""/></svg>",
vegetarian: "<svg><path d=""/></svg>",
}
};
const SvgDefs = (icons) => {
return Object.keys(icons).map(iconName => {
return <span key={data.icons[iconName]} dangerouslySetInnerHTML={{
__html: data.icons[iconName].replace('svg', `svg id="svg-${iconName}"`)
}} />;
});
};
我的組件將其渲染為：
return <svg aria-hidden="true" id="svgdefs" xmlns="http://www.w3.org/2000/svg">
<defs>
<SvgDefs icons={data.icons} />
</defs>
</svg>
但是，當我檢查 Chrome 開發工具中的 Elements 選項卡時，我看到包含 svg 的跨度在<defs>塊之外：
我在這里做錯了什么？
uj5u.com熱心網友回復：
問題來自您呼叫功能組件的輸入引數icons，以及源自該命名選擇的假設。
功能組件通過包裹在一個物件中的 JSX 屬性傳遞，通常稱為props，因此呼叫您的函式輸入props，然后從中取回您的資料。既然您通過了icons=...，您將需要通過props.icons以下方式訪問該資料：
const SvgDefs = (props) => {
const { icons } = props;
return Object.entries(icons).map(([name, html]) => {
return <span key={name} dangerouslySetInnerHTML={{
__html: html.replace('svg', `svg id="svg-${name}"`)
}} />;
});
};
雖然在你的 data.icons 中沒有 SVG 字串會更有意義：只要有更多的 JSX，所以你根本不需要危險地設定 innerHTML。
uj5u.com熱心網友回復：
我發現原因是因為<span>不能在里面使用<defs>。我<symbol>改用了，一切都按預期作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/405440.html
標籤：
下一篇：next.js影像缺少src屬性