Adjacent JSX éléments doit être enveloppé dans une balise englobante avec étiquette de rupture de ligne

Imaginer:

return (<a href="{this.props.url}">{this.props.name}</a><br>)

aussi tenté avec

return (<a href="{this.props.url}">{this.props.name}</a><br />)

Pendant que le script fonctionne sans problème, le JSX compilateur est bouleversé par la <br> balise, car c'est un loup solitaire dans la logique et n'a pas d'ouverture/fermeture de la balise il est juste.

si, d'autre part-je supprimer le <br>

return (<a href="{this.props.url}">{this.props.name}</a>)

il n'y a pas d'erreur renvoyé, assez explicite quant à ce qu'est la question. La question cependant est de savoir comment résoudre le problème sous-jacent. comment puis-je avoir cette balise (ou son équivalent en cas de besoin). Être ajoutée après chaque l'un des ci-dessus de rendu des déclarations.

Choses à assumer, c'est une boucle de url/noms de générer un rapport html liste de liens sur la page. Tout le moins ce facteur ainsi, beaucoup de travaux.

La question sous-jacente globale est une question d'esthétique. Je suis à l'aide de bootstrap, et que les choses sont assez uniformes, et je n'ai aucune envie d'en créer un-classes ou des styles en ligne pour accueillir le saut de ligne. C'est juste purement pour l'amour de la facilité de maintenance en bas de la route.

OriginalL'auteur chris | 2015-09-16

10

Vous avez besoin d'un emballage balise racine:
```
<div>
    <a href={this.props.url}>{this.props.name}</a>
    </br>
</div>
```
Qui n'est qu'un habillage de la balise, ce est un cas de plusieurs enfants rendus par une boucle. Primaire par exemple, facebook.github.io/réagir/docs/.... Dans ce cas, pour envelopper les enfants avec un parent qui serait la cause supplémentaire de balisage autant que bootstrap est concerné
Eh bien, réagir simplement dit pas si vous essayez d'avoir un composant avec aucune balise racine donc il n'y a pas échapper que si vous voulez le style de l'ancre avec display:block
peut-être que ça aide quand vous l'envelopper dans un <span>

OriginalL'auteur Eelke

Vous pouvez vous rendre beaucoup de "tags" avec un Composant, mais il DOIT être dans une "balise parent", un peu comme Eelke dit.

Une autre façon de le faire est de déclarer une variable dans render() et la fonction de retour:

render(){
    var step;
    if(this.props.gender==="male"){
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh um homem! </p>
            <b>aqui</b>
          </div>
        );
    }else{
        step = (
          <div>
            <p>A pessoa chamada {this.props.name} eh uma mulher! </p>
            <b>aqui</b>
          </div>
        );
    }
    return step;
}

OriginalL'auteur Caio Saldanha

Vous devez vous connecter pour publier un commentaire.