相鄰的JSX元素必須包裹在換行符標籤的封裝標籤

試想：相鄰的JSX元素必須包裹在換行符標籤的封裝標籤

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>)

沒有錯誤拋出，非常自我解釋至於是什麼問題。但問題是如何解決潛在的問題。我怎麼能有這個標籤（或者如果需要的話，它的等價物）。在每個上述渲染語句之後添加。

要承擔的事情，這是一個網頁/名稱的循環，生成頁面上的鏈接的HTML列表。到目前爲止，減去這個因素的一切工作。

整體而言，潛在的問題是一個美學問題。我使用bootstrap，因爲它們相當統一，我不想創建一次性類或內聯樣式來適應換行。這僅僅是爲了可維護性的緣故。

來源

2015-09-16 chris

你需要一個包裝根標籤：

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

來源

2015-09-16 20:07:10 Eelke

其中有一個包裹標籤，這是整體通過環呈現多個孩子的情況。主要示例是https://facebook.github.io/react/docs/multiple-components.html#dynamic-children。因此，在這種情況下，將孩子與另一個父母包裝在一起就會引起額外的標記 – chris

@chris好吧，如果您嘗試使用沒有單個根標記的組件，那麼反應就會顯示爲「no」，因此除非您想要使用'display：block'設置錨點的風格' – ivarni

當你把它包裝在'' – Eelke

可以使很多「標籤」與組件，但它必須是一個「父標籤」中，就像Eelke說。

另一種方式這樣做是聲明一個變量中渲染（）函數，並將其返回：

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

來源

2017-01-25 03:15:14

相鄰的JSX元素必須包裹在換行符標籤的封裝標籤

回答

相關問題