react - 讓一個元素返回兩個相鄰的元素<tr>標籤

我正在構建一個表格，每一行後面跟着一個「擴展器」行。默認情況下這些行是隱藏的。點擊任何行應該切換下一行的可見性。react - 讓一個元素返回兩個相鄰的元素<tr>標籤

最有意義到我的設計是考慮這些對行作爲一個單一的「小區」的，並封裝在所述電池元件的觸發邏輯：

class Cell extends React.Component { 
    # some logic here 

    render() { 
    return <tr><td>visibile</td></tr> 
      <tr><td>invisibile</td></tr> 
    } 
}

這是不允許的，原因反應抱怨。我可以通過將兩個tr節點放在div中來解決這個問題。但是，它不僅非常難看，但它也使陣營抱怨越來越刪除：

Danger.js:107 Danger: Discarding unexpected node: <div >

最終，我進入一個爛攤子，該事件處理程序不同意這種錯誤的工作：

invariant.js:39 Uncaught Error: Invariant Violation: 
findComponentRoot(..., .0.1.$0.0.0.$/=11.0.0.1.$0): Unable to find element. 
This probably means the DOM was unexpectedly mutated (e.g., by the browser), 
usually due to forgetting a <tbody> when using tables, nesting tags like 
<form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. 
Try inspecting the child nodes of the element with React ID ''.

我應該如何設計我的Cell組件，以便我沒有「危險」語句，而且我仍然可以將邏輯封裝在單個組件中？

來源

2016-05-09 user1496984

你可以將這兩行包裝在一個'tbody'元素中。 – pawel

啊，一張桌子可以有很多'tbody'元素？ – user1496984

是的：http://stackoverflow.com/questions/3076708/ – pawel

這似乎是反應的主要問題：https://github.com/facebook/react/issues/2127

在這一點上，你最容易的選擇可能是react-package。它允許你創建<frag>標籤，當組件被渲染，這將被刪除：

class Cell extends React.Component { 
    # some logic here 

    render() { 
    return (
     <frag> 
      <tr><td>visibile</td></tr> 
      <tr><td>invisibile</td></tr> 
     </frag> 
    } 
}

此外，作爲@pawel指出的那樣，你可以use multiple <tbody> elements。

來源

2016-05-09 09:52:24 nils

正如@pawel在評論中指出的那樣，解決方案是將tr元素包裝在tbody中。

來源

2016-05-09 09:58:33 user1496984

react - 讓一個元素返回兩個相鄰的元素<tr>標籤

回答

相關問題