sąsiednimi elementami JSX muszą być opakowane w otaczającej tag tag linia przerwy

Question

Imagine:

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

również próby z

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

Podczas gdy skrypt działa bez problemu, kompilator JSX jest zdenerwowany Tag <br>, ponieważ jest samotnym wilkiem w logice i nie ma tagu otwarcia/zamknięcia, po prostu jest.

jeśli z drugiej strony ja usunąć <br>

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

nie ma błędu rzucony, dość wymowne miarę czym polega problem. Pytanie jednak, jak rozwiązać podstawowy problem. jak mogę mieć ten tag (lub jego odpowiednik, jeśli zajdzie taka potrzeba). Dodaj po każdej z powyższych instrukcji renderowania.

Rzeczy do założenia, jest to pętla adresów/nazw generujących listę html linków na stronie. Wszystko bez tego czynnika do tej pory działa.

Podstawową kwestią jest ogólnie kwestia estetyki. Używam bootstrap, i że rzeczy są dość jednolite i nie mam ochoty tworzyć jednorazowych klas lub wbudowanych stylów, aby dostosować się do przerwy w linii. Jest to wyłącznie ze względu na łatwość konserwacji na drodze.

Answer 1

Trzeba tag korzeniowy Opakowanie:

<div> 
    <a href={this.props.url}>{this.props.name}</a> 
    </br> 
</div> 

Answer 2

Można renderowanie wielu „Tagi” ze składnikiem, ale musi być w tagu „macierzystego”, podobnie jak Eelke powiedział.

Inny sposób to jest poświadczenie zmiennej wewnątrz czyni() i jej powrót:

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; 
}