Je suis un peu rouillé ici et je note que ce qui se passe. Voici mon fichier: Je reçois l'erreur suivante: sur la ligne 13 (c'est-à-dire lorsque la boucle de la boucle commence) < / p> Considérant que j'ai incorporé le code JS dans les tags {} Je ne sais pas pourquoi cela échoue
3 Réponses :
Remplacer pour avec content_links_presentable.map (/ * ... * /) afin qu'il renvoie une gamme de nœuds. N'oubliez pas de clés!
{
CONTENT_LINKS_PRESENTABLE.map(content => (
<div className="navbar-item" key={content}>
<Link to={CONTENT_LINKS_SLUG[content]} className="navbar-link">
{CONTENT_LINKS_PRESENTABLE[content]}
</Link>
</div>
))
}
Vous ne pouvez passer que des expressions. si code> et pour code> ne sont pas des expressions et ne peuvent donc pas être utilisés. Voir le réact de Docs ici . Comment vous pouvez vous déplacer cela. import React from 'react';
import './Navbar.css';
import {CONTENT_LINKS_PRESENTABLE, CONTENT_LINKS_SLUG} from '../../globals'
import {Link} from "react-router-dom";
function Navbar() {
return (
<div className="navbar">
<div className="navbar-item">
<Link to="/" id="navbar-brand">Daniel Pahor</Link>
</div>
<div id="navbar-items">
{CONTENT_LINK_PRESENTABLE.map(content => (
<div className="navbar-item" key={content}>
<Link to={CONTENT_LINKS_SLUG[content]} className="navbar-link">{CONTENT_LINKS_PRESENTABLE[content]}</Link>
</div>
))}
</div>
</div>
)
}
export default Navbar;
La raison de l'erreur de syntaxe est qu'un Vous pouvez transmettre n'importe quelle expression javascript comme enfants, en le jointant dans Aussi de la section "" Expressions JavaScript comme accessoires ":
Comme suggéré par les autres réponses, une bonne alternative consiste à utiliser pour boucle n'est pas une expression JavaScript, par officiel réagissant Docs " JSX en profondeur " section " Expressions JavaScript comme enfants ":
{} .
si Les instructions et pour Les boucles ne sont pas des expressions dans JavaScript, elles ne peuvent donc pas être utilisées dans JSX directement. Au lieu de cela, vous pouvez les mettre dans le code environnant.
carte .
Pourquoi ne pas simplement carte sur le tableau?
{content_links_presentable.map ((link) => ... ) Vous pouvez également le faire pour la boucle avant de définir
jsx et appuyer sur les éléments dans Un tableau que vous utilisez ensuite pour rendre les éléments NAVBAR
Ou si
content_links_presentable est un objet, vous pouvez faireobjet.keys (content_links_presentable) .Map (link => ... ) pour transformer le Clés d'objet dans un tableau mappable
Est-ce que cela répond à votre question? boucle à l'intérieur de réagir JSX
@Sethlutske Je doute que c'est un objet depuis la manière dont le contenu
est utilisé est utilisé comme clé de recherche{content_links_presentable [Contenu ]} . Je crois que c'est un tableau de cordes :)Si c'est un objet, il y a déjà une bonne question déjà: Comment boucler un objet dans réagir?
@Johnruddell Je pensais peut-être que c'était un objet parce que pourquoi d'autre utiliseriez-vous un
pour Var dans boucle ... mais comme vous l'avez dit ... Qui saitAh ok, la carte () idée est jolie, j'aime beaucoup, je vais essayer ça