必須將相鄰的JSX元素包裝在帶有換行符標記的封閉標記中

Question

想像：

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

也嘗試過

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

雖然腳本運行沒有問題，但是JSX編譯器被<br>標簽打亂了，因為它在邏輯中是一只孤獨的狼，並且它沒有打開/關閉標記。

如果另一方面我刪除了<br>

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

沒有拋出任何錯誤，就問題而言，這是非常自我解釋的。 但問題是如何解決潛在的問題。 我怎樣才能擁有該標簽（或者如果需要的話還有它的等價物）。 在上述每個渲染語句之后添加。

需要注意的是，這是一個urls / names循環，它在頁面上生成一個html鏈接列表。 到目前為止減去這個因素的一切都有效。

總體而言，潛在的問題是美學問題。 我正在使用bootstrap，因為事情是相當統一的，我不想創建一次性類或內聯樣式來適應換行符。 這純粹是出於可維護性的考慮。

Answer 1

你需要一個包裝根標簽：

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

Answer 2

您可以使用Component渲染許多“標記”，但它必須位於“父標記”內，就像Eelke所說的那樣。

另一種方法是在render（）函數中聲明一個變量並返回它：

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