Angrenzenden JSX-Elemente müssen gewickelt werden, die in einem umschließenden tag mit Zeilenumbruch-tag

Vorstellen: 

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

versuchte auch, mit 

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

Während das Skript läuft ohne Problem, die JSX-compiler ist bestürzt über die <br> tag, da es ein lone wolf in die Logik und hat keine open/close-tag es gerade ist.

wenn auf der anderen Seite Entferne ich die <br>

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

ist es kein Fehler geworfen, ziemlich selbsterklärend, so weit wie, was das Problem ist. Die Frage ist aber, wie Sie zu beheben das zugrunde liegende problem. wie kann ich dieses tag (oder sein äquivalent, wenn es sein muss). Hinzugefügt werden, nachdem jeder eine der oben genannten rendering-Anweisungen.

Dinge zu übernehmen, das ist eine Schleife von urls/Namen, generieren von html-Liste mit links auf der Seite. Alles minus dieser Faktor so weit funktioniert.

Das zugrunde liegende Problem ist insgesamt ein Problem der ästhetik. Ich benutze bootstrap, und dass die Dinge sind ziemlich einheitlich, und ich habe keine Lust, eines zu erstellen-aus Klassen oder inline-styles, um Platz für den Zeilenumbruch. Dies ist nur rein aus Gründen der Wartbarkeit die Straße hinunter.

InformationsquelleAutor chris | 2015-09-16
  1. 10

    Benötigen Sie eine Verpackung root-tag: 

    <div>
    <a href={this.props.url}>{this.props.name}</a>
    </br>
</div>
    • Die es ist ein Umbruch-tag, dies ist insgesamt ein Fall von mehreren Kindern wiedergegeben durch eine Schleife. Primären Beispiel, facebook.github.io/reagieren/docs/.... Also in diesem Fall wickeln die Kinder mit dem anderen Elternteil würde dazu führen, zusätzliche markup, wie weit, wie bootstrap ist besorgt
    • Gut, reagieren einfach Nein sagt, wenn Sie versuchen, eine Komponente, mit der keine einzige Wurzel-tag so, es gibt kein entkommen, es sei denn Sie wollen den Stil der Anker mit display:block
    • vielleicht hilft es, wenn Sie wickeln Sie es in ein <span>
    InformationsquelleAutor Eelke
  2. 0

    Wiedergegeben werden können, viele "tags" mit einer Komponente, MUSS es aber innerhalb eines "Eltern-tag", wie Eelke sagte.

    Anderen Weg, dies zu tun ist, um eine variable zu deklarieren innerhalb der render () - Funktion und die Rücksendung:

    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;
}
    InformationsquelleAutor Caio Saldanha
Schreibe einen Kommentar