elementi adiacenti JSX devono essere avvolti in un tag che racchiude il tag di interruzione di riga

Question

Immaginate:

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

anche tentato con

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

mentre lo script viene eseguito senza alcun problema, il compilatore JSX è sconvolto da il tag <br>, dal momento che è un lupo solitario nella logica e non ha un tag di apertura/chiusura che lo è.

se d'altra parte posso rimuovere la <br>

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

non v'è alcun errore generato, piuttosto auto esplicativo per quanto riguarda quello che è il problema. La domanda tuttavia è come risolvere il problema sottostante. come posso avere quel tag (o il suo equivalente se necessario). Essere aggiunto dopo ognuna delle dichiarazioni di rendering sopra.

Cose da assumere, questo è un ciclo di url/nomi che generano un elenco html di collegamenti nella pagina. Tutto meno questo fattore fino ad ora funziona.

Il problema di fondo è una questione di estetica. Sto usando bootstrap, e in questo le cose sono abbastanza uniformi e non ho il desiderio di creare classi uniche o stili in linea per adattare l'interruzione di linea. Questo è puramente a scopo di manutenibilità lungo la strada.

Answer 1

Hai bisogno di un tag principale involucro:

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

Answer 2

si può rendere molti 'tag' con un componente, ma deve essere all'interno di un 'tag genitore', proprio come Eelke detto.

Un altro modo per farlo è quello di dichiarare una variabile all'interno di render() e restituirlo:

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