Javascript React.js-创建简单的手风琴示例

我是一个新的反应者，我很难处理这个逻辑：

本质上，我是在使用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>
    )
  }
}

更具体地说，构造隐藏行的最佳方法是什么？创建为单元格的子级还是同级

我假设我需要状态来跟踪当前打开的内容，等等

---

我已将链接附加到“乱搞”

这可以通过以下方式完成：

让所有单元格都位于一个父div中，让单元格描述为另一个同级div，尽管使用会更好。在同级div上放置一个类，例如hidden。不在cells分区上添加click处理程序。每当单击此分区时，使用该分区的id/键更新状态。现在，使用它将隐藏类设置为其他div。将此.state.key与当前id/密钥进行比较，并相应地显示或隐藏。我没有给出具体的代码

---

注意：不必将div存储在renderDataRows中，只需将数据放入其中并映射到其上即可创建所有div。这样，您就可以在一个地方轻松地操作隐藏类和任何其他变体，而不必为每行数据单独更新它。

感谢您的输入。这是否意味着如果我有+100行，我必须跟踪所有+100行的状态？不。你可以只在状态中放置一个key/I'd元素来保持活动或打开的手风琴I'd/key。如果你需要相同的帮助，请告诉我。如果你已经做到了，试着在这里加一把小提琴，以帮助其他有类似问题的人。谢谢如果有帮助，也接受答案。