如何在React.js呈現時避免JSX組件被壓縮？

我發現React.js會在渲染時壓縮JSX組件HTML標記，是否可以避免這種情況？如何在React.js呈現時避免JSX組件被壓縮？

例如，我有這樣定義的JSX組件：

<div id="wrapper"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
</div>

渲染後，它顯示在瀏覽器這種方式，凝聚：

<div id="wrapper"><span>1</span><span>2</span><span>3</span></div>

我知道這是一個有點對於問這樣的問題很陌生，但有時候我只想讓組件按照我定義的方式呈現。

，縮合和不凝結的代碼之間的區別：

不凝：

凝結：

他們AR自然是相同的代碼。儘管我知道非濃縮代碼與濃縮代碼的作用不同，因爲它包含一些製表符或空白字符，原本是我們如何定義它的。

也許這是荒謬的，是沒有意義的做到這一點，但我仍然欣賞任何幫助，謝謝！

來源

2015-09-21 Eric Zheng

你能更具體關於你看到的行爲和你想要的行爲，爲什麼？ –

這是'inline-block'元素的預期行爲。 @ insin的答案在下面是正確的;要麼手動添加空白區域，要麼將span更改爲'display：block;'（儘管取決於可能導致其他問題的應用程序） – pmilla1606

不要忘了JSX是函數調用只是糖。因此，這...

<div id="wrapper"> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
</div>

...是這只是糖：

React.createElement("div", { id: "wrapper" }, 
    React.createElement("span", null, "1"), 
    React.createElement("span", null, "2"), 
    React.createElement("span", null, "3") 
);

如果你想它出現在不同線路上的元素之間的空白，你可以添加一些手動...

<div id="wrapper"> 
    <span>1</span>{" "} 
    <span>2</span>{" "} 
    <span>3</span> 
</div>

...或開放上，在它們之間的空白同一行新要素（JSX transpiler尊重元件之間的內容，只是不換行符其鄰近元素）：

<div id="wrapper"> 
    <span>1</span> <span>2</span> <span>3</span> 
</div>

...兩者transpile這樣：

React.createElement("div", { id: "wrapper" }, 
    React.createElement("span", null, "1"), 
    " ", 
    React.createElement("span", null, "2"), 
    " ", 
    React.createElement("span", null, "3") 
);

來源

2015-09-21 08:31:51

您也可以在JSX中執行此操作：'

1{' '}2{' '}3

' – AgentME

如果它是適當的，你可以使用display: inline-block帶側緣等於空間寬度：

#wrapper span { 
    display: inline-block; 
    margin-right: 0.28em; 
}

來源

2018-01-31 11:33:16 Distagon

如何在React.js呈現時避免JSX組件被壓縮？

回答

相關問題