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类和任何其他变体，而无需为每行数据单独更新。