嘿，我想弄清楚如何在 JavaScript Map 中將 SVG 設定/渲染為 React 組件。我想這樣做是因為我希望能夠匯入 SVG 一次，然后能夠通過它們的道具在我的應用程式中更改它們的顏色，即<Logo fill={color} />
我對 React 很陌生，所以如果有比我現在做的更好的方法來解決這個問題，請告訴我怎么辦。謝謝！
// LogoMap.js
import { ReactComponent as Logo } from "assets/MyLogo.svg";
const LogoMap = new Map();
LogoMap.set("1", Logo);
// ... Setting more items
export { LogoMap }
import { LogoMap } from "data/LogoMap";
function MyComponent() {
const Logo_One = LogoMap.get("1")
return (
// How do I render Logo_One? Or what is a better way to go about this?
// I've tried doing <Logo_One /> but I get the error:
// "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
<Logo_One fill="blue">
);
}
uj5u.com熱心網友回復：
我認為您沒有為內置地圖使用正確的方法。
LogoMap.set('1', Logo);
檢索
LogoMap.get('1')
一種更具反應性的方法是創建一個包裝地圖的組件，這樣您就不需要公開它。在我撰寫的代碼中，我只使用了一個物件而不是 Map 資料結構
const icons = {
"1": Logo1,
....
}
const MyIcon = props => {
const icon = map.get(props.name) // or icons[props.name];
return <icon fill={props.fill} {...props} />
}
uj5u.com熱心網友回復：
對于這種情況，我建議使用和文字物件，但這不是問題所在。
我建議您像這樣保存“徽標”：
LogoMap("1", (props) => <Logo {...props}/>);
然后
import { LogoMap } from "data/LogoMap";
function MyComponent() {
const LogoOne = myMap.get("1")
return
<LogoOne fill="blue">
);
}
我認為這應該有效！我希望我能幫助你
uj5u.com熱心網友回復：
我（OP）最終通過使用這個包 NPM 包https://www.npmjs.com/package/react-inlinesvg解決了這個問題。
因此，我沒有創建 ID 的映射 --> React 組件，而是創建了一個 ID 的映射 --> Image Source(string) 并在 Inline SVG 中使用了該影像 src url。
這是我最終做的完成的代碼
// LogoMap.js
import MyLogo from "assets/MyLogo.svg";
const LogoMap = new Map();
LogoMap.set("1", MyLogo);
// ... Setting more items
export { LogoMap }
import { LogoMap } from "data/LogoMap";
function MyComponent() {
const LogoOne = LogoMap.get("1")
return (
<Svg src={LogoOne} fill="blue" />
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486841.html
標籤：javascript 反应 svg 创建反应应用
下一篇：移動設備上的SVG物件問題