React.js - 創建簡單手風琴例如

Question

我貼切新的反應和我有關於如何解決這個邏輯麻煩：

從本質上講，我使用Flexbox將創建一個表，我也希望它使當你點擊其中一行時，它會展開並顯示另一行（例如，它會給出一個小的描述）。

到目前爲止，我所擁有的只是表格。

class Application extends React.Component { 
    render() { 
    const renderDataRows = (
     [ 
       <div key={0} className='row'> 
        <div className='cell description'> Mortage Bill 
        </div> 
        <div className='cell amount'>$0,000,000</div> 
        <div className='cell amount'>$2.50</div> 
        <div className='cell amount'v>000%</div> 
       </div>, 
       <div key={1} className='row'> 
        <div className='cell description'> Electric Bill 
        </div> 
        <div className='cell amount'>$0,000,000</div> 
        <div className='cell amount'>$2.50</div> 
        <div className='cell amount'v>000%</div> 
       </div>, 
     ] 
     ) 


    const containerTable = (
      <div className='table-container'> 
       {renderDataRows} 
      </div> 
     ) 
    return (
     <div> 
     {containerTable} 
     </div> 
    ) 
    } 
} 

更具體地說，構建隱藏行的最佳方法是什麼？創建一個孩子的細胞，或兄弟姐妹？

我假設我需要狀態來跟蹤當前打開的內容等等。

我周圍附着

Answer 1

這可以通過以下方式進行Codepen鏈接亂：

讓所有的cells是在一個單親DIV，讓小區描述是另一個兄弟DIV（雖然使用會更好）。把一門課放在兄弟分區上，如hidden。不要在cells div上添加點擊處理程序。每當這個div被點擊時，用該div的id/key更新狀態。現在使用它來將hidden類設置爲其他div。將this.state.key與當前的id/key進行比較並相應地顯示或隱藏。我沒有給出具體的代碼。

注意：而不是將div存儲在renderDataRows中，只需在其中存儲數據並將其映射到其上即可創建所有div。這樣，您可以輕鬆地在單個位置操作hidden類和任何其他變體，而無需爲每行數據單獨更新。