我是 Vue 的新手，我想根據任務狀態呈現一個 SVG 圖示，并想為此創建一個可重用的功能，我該怎么做？
在 React 中，我可以做這樣的事情：
const iconStatusMapping = {
todo: <svg></svg>,
processing: <svg>...</svg>,
done: <svg>...</svg>
}
// utils.ts
export const getTaskStatusIcon = (status: TaskStatus) => {
return iconStatusMapping[status]
}
function App() {
const status = "todo"
return (
<div>{getTaskStatusIcon(status)} {status}</div>
)
}
我如何在 Vue3 中做類似的事情？
uj5u.com熱心網友回復：
在 React 中，將重用元素定義為未包裝在函式中的 JSX 可能不是一個好主意，因為元素物件在每次渲染時都是新的。這可能對 SVG 圖示沒有影響，但在其他情況下可能會出現意外行為。
在 Vue 中，這個片段可以直接翻譯成渲染函式和 JSX。
像 SVG 圖示這樣的靜態 HTML 可以安全地定義為字串并使用 Vue 輸出v-html，這同樣適用于 React dangerouslySetInnerHTML：
const iconStatusMapping = {
todo: `<svg></svg>`,
...
}
和
v-html="iconStatusMapping[status]"
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395509.html