J'ai fait un composant de menu qui accepte un objet JSON avec tout menu ITENS.
Pour les icônes, j'utilise réacteur-icons / io code>.
L'objet JSON est quelque chose comme ceci: const buttons = Object.keys(this.props.menus).map((menu) => {
return (
<a key={menu} href={this.props.menus[menu].path}
onClick={this.changeMenu.bind(this, menu)}>
{...this.props.menus[menu].icon} <- fail here
{this.props.menus[menu].buttonText}
</a>
);
})
3 Réponses :
Je travaillais juste avec un projet similaire et j'ai réussi à le faire fonctionner, avec une syntaxe comme celle-ci
I ici possède une gamme d'objets (comme la vôtre) p> Je rendant mon composant par mappage, où je passe dans l'objet entier en tant que PROP P> //in my case I use antd framework, so I pass the FAIcon component in as a prop
<Meta
avatar={logo}
title={title}
description={description}
/>
Si vous importez l'icône à partir de laquelle vous définissez l'objet, il suffit de baliser <a key={menu} href={this.props.menus[menu].path}
onClick={this.changeMenu.bind(this, menu)}>
{React.createElement(this.props.menus[menu].icon)}
{this.props.menus[menu].buttonText}
</a>
Oui, il s'agit également d'une solution possible, mais aucune raison d'accéder à la matrice à nouveau, car chaque élément est déjà mappé
J'ai essayé ça. Il se casse avec: 'Les objets ne sont pas valides comme un enfant réagissant (trouvé: objet avec des clés {iologoandroid}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau. ». La deuxième manière donne l'erreur: le type d'élément n'est pas valide: attendu une chaîne (pour composants intégrés) ou une classe / fonction (pour composants composites) mais obtient: objet.
Désolé, je n'ai pas adapté la définition de l'objet menus. Les icônes ne doivent pas être un objet, il devrait être un objet icône: iologoandroid ou icône: {...} de la valeur de l'icône. J'ai édité ma réponse.
ça marche. En passant à Json comme tag fonctionne. Mais appeler réact.Createeelement donne toujours la même erreur. Je peux faire quelque chose de mal, c'est mon premier projet de réaction. De toute façon que vous avez résolu. Tock
Vous devez modifier les éléments suivants: et dans le code (retirez l'opérateur de répression): p> envisagez de ne transmettre qu'une référence à OnClick telle que: p>
Si vous avez besoin de transmettre des données autour, vous devez utiliser un jeu de données pour cela. Passez un nom / chemin, puis trouvez-le à l'intérieur du gestionnaire de changement pour éviter de se reproduire à l'intérieur de chaque rendu. P> suggestion refouturée avec un tableau d'objets forts> P>
changeMenu = e => {
const { menus } = this.props;
const { menuName } = e.target.dataset;
const menu = menus.find(menu => menu.name === menuName);
// Do something with menu
return;
};
renderMenu() {
return (
<ul>
{this.props.menus.map(menu => (
<li key={menu.name} style={{ listStyle: "none" }}>
<a
data-menu-name={menu.name}
href={menu.path}
onClick={this.changeMenu}
>
{menu.icon}
{menu.buttonText}
</a>
</li>
))}
</ul>
);
}
Aucun problème. Heureux ça vous a aidé.
J'aimerais savoir pourquoi cette question obtient 2 bowvotes. 3 personnes n'offrent-elles pas qu'ils aident, fournissant 3 solutions au problème en 1 jour, ne suffit pas à qualifier de question valable? Si vous êtes l'un des bowvotes de qui pouvez-vous clarifier pour que je ne puisse plus faire la même erreur?