1
votes

Comment transmettre plusieurs clés et leurs attributs de balise HTML dans React

J'ai un a-tag qui ressemble à ceci

<a href={ item.finalUrl } { item.htmlReportAttributes } 

qui obtient ses valeurs pour le href et le linktext à partir de ce

target="_blank" rel="noopener noreferrer"

Mon plan était maintenant de passer en plus

row.htmlReportUrl = res.db[key].htmlReport
row.htmlReportText = 'HTML Report'

de la même manière. Ces attributs doivent être définis juste parfois. Mais faire quelque chose comme ça

<a href={ item.htmlReportUrl } target="_blank" rel="noopener noreferrer">
{item.htmlReportText}</a>

ne fonctionne pas.

Erreur d'analyse: jeton inattendu, "..." attendu.

Je suppose que c'est ajouté au href? Comment puis-je transmettre plusieurs attributs HTML à la fois?


1 commentaires

Vous avez peut-être oublié l'opérateur de diffusion "...", Ce "..." est la syntaxe


3 Réponses :


0
votes

Vous devez définir un attribut comme celui-ci

<a href={item.finalUrl} {...customAttr} >Link title</a>

puis passer la balise html comme ci-dessous:

let customAttr= {'target': '_blank','rel':'noopener noreferrer'}


0 commentaires

2
votes

Essayez :

item.htmlReportAttributes["target"] = "_blank";
item.htmlReportAttributes["rel"] = "noopener noreferrer";
<a href={ item.finalUrl } { ...item.htmlReportAttributes } >{item.htmlReportText}</a>


0 commentaires

0
votes

Si vous vérifiez l'état de l'indicateur si vous souhaitez utiliser ces attributs supplémentaires, vous pouvez essayer:

<a href={ item.finalUrl } target={this.state.addExtraAttributes == true ? "_blank" : ""} rel={this.state.addExtraAttributes == true ? "noopener noreferre" : ""} >


0 commentaires