est-il possible que je puisse une importation dynamique basée sur les accessoires de parent dans réagir?
pour mon code:
Comment puis-je utiliser une valeur d'icône dynamique pour importer l'élément SVG en fonction de la valeur de l'icône de parent plutôt que swtich?
3 Réponses :
Si vous souhaitez éviter de faire un commutateur, vous pouvez créer un objet avec vos importations:
const icons = {
svg1,
svg2,
svg3,
};
const Child = (props) => {
const Component = icons[props.icon];
return <Component />;
};
Est-il possible que je puisse utiliser apps.icon uniquement sur l'enfant plutôt que sur le SVG1, SVG2 ou SVG3? Si j'ai plus d'icônes alors, j'ajouterai un objet manultanément à des icônes, ce n'est pas une totalité dynamique.
Vous pouvez essayer d'utiliser l'étiquette d'image, comme celui-ci; enfant
basé sur celui-ci - https: / /sung.codes/blog/2017/12/03/loading-react-components-Dynamiquement-demand/
i Finalement obtenir la solution: p>
const { icon } = props
const [components, setComponents] = useState([])
const addComponent = async (icon) => {
import(`./${icon}.js`)
.then((component) => {
setComponents(components.concat(component.default))
})
.catch((error) => {
console.error(`"${icon}" not yet supported`)
})
}
const getElement = async (icon) => {
await addComponent(icon)
}
useEffect(() => {
console.log("icon", icon)
getElement(icon)
}, [])
const componentsElements = components.map((Component) => <Component />)
...
return <div>{componentsElements}</div>
Je ne comprends pas, les accessoires des parents sont une corde ou autre chose?
C'est une chaîne et la valeur est le nom de l'élément icon SVG. Je enveloppe les icônes SVG pour réagir à l'élément.